diff --git a/src/components/Form/FormProvider.tsx b/src/components/Form/FormProvider.tsx index baf19527ccee..215fd2a7a768 100644 --- a/src/components/Form/FormProvider.tsx +++ b/src/components/Form/FormProvider.tsx @@ -90,6 +90,9 @@ type FormProviderProps = FormProps void; + + /** Prevents the submit button from triggering blur on mouse down. */ + shouldPreventDefaultFocusOnPressSubmit?: boolean; }; function FormProvider( @@ -105,6 +108,7 @@ function FormProvider( allowHTML = false, isLoading = false, shouldRenderFooterAboveSubmit = false, + shouldPreventDefaultFocusOnPressSubmit = false, ...rest }: FormProviderProps, forwardedRef: ForwardedRef, @@ -438,6 +442,7 @@ function FormProvider( isLoading={isLoading} enabledWhenOffline={enabledWhenOffline} shouldRenderFooterAboveSubmit={shouldRenderFooterAboveSubmit} + shouldPreventDefaultFocusOnPressSubmit={shouldPreventDefaultFocusOnPressSubmit} > {typeof children === 'function' ? children({inputValues}) : children} diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx index c52c9949a37b..86b3f6cc8a03 100644 --- a/src/components/Form/FormWrapper.tsx +++ b/src/components/Form/FormWrapper.tsx @@ -61,6 +61,9 @@ type FormWrapperProps = ChildrenProps & /** Fires at most once per frame during scrolling. */ onScroll?: () => void; + + /** Prevents the submit button from triggering blur on mouse down. */ + shouldPreventDefaultFocusOnPressSubmit?: boolean; }; function FormWrapper({ @@ -89,6 +92,7 @@ function FormWrapper({ addOfflineIndicatorBottomSafeAreaPadding, shouldSubmitButtonStickToBottom: shouldSubmitButtonStickToBottomProp, shouldSubmitButtonBlendOpacity = false, + shouldPreventDefaultFocusOnPressSubmit = false, onScroll = () => {}, }: FormWrapperProps) { const styles = useThemeStyles(); @@ -178,6 +182,7 @@ function FormWrapper({ enterKeyEventListenerPriority={1} shouldRenderFooterAboveSubmit={shouldRenderFooterAboveSubmit} shouldBlendOpacity={shouldSubmitButtonBlendOpacity} + shouldPreventDefaultFocusOnPress={shouldPreventDefaultFocusOnPressSubmit} /> ), [ @@ -206,6 +211,7 @@ function FormWrapper({ submitButtonText, submitFlexEnabled, shouldRenderFooterAboveSubmit, + shouldPreventDefaultFocusOnPressSubmit, ], ); diff --git a/src/components/FormAlertWithSubmitButton.tsx b/src/components/FormAlertWithSubmitButton.tsx index 9198aa04e63e..2feeaa43bca2 100644 --- a/src/components/FormAlertWithSubmitButton.tsx +++ b/src/components/FormAlertWithSubmitButton.tsx @@ -74,6 +74,9 @@ type FormAlertWithSubmitButtonProps = { /** Whether to add a bottom padding to the button */ addButtonBottomPadding?: boolean; + + /** Prevents the button from triggering blur on mouse down. */ + shouldPreventDefaultFocusOnPress?: boolean; }; function FormAlertWithSubmitButton({ @@ -98,6 +101,7 @@ function FormAlertWithSubmitButton({ shouldRenderFooterAboveSubmit = false, shouldBlendOpacity = false, addButtonBottomPadding = true, + shouldPreventDefaultFocusOnPress = false, }: FormAlertWithSubmitButtonProps) { const styles = useThemeStyles(); const style = [footerContent && addButtonBottomPadding ? styles.mb3 : {}, buttonStyles]; @@ -130,6 +134,7 @@ function FormAlertWithSubmitButton({ danger={isSubmitActionDangerous} medium={useSmallerSubmitButtonSize} large={!useSmallerSubmitButtonSize} + onMouseDown={shouldPreventDefaultFocusOnPress ? (e) => e.preventDefault() : undefined} /> ) : (