From ccf96a0579d9881421e430385d5cdf4ed0935ab1 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Fri, 23 May 2025 09:20:45 +0700
Subject: [PATCH 1/4] fix: tapping next with blank field cursor lost and keypad
 closed

---
 src/components/Form/FormWrapper.tsx          | 1 +
 src/components/FormAlertWithSubmitButton.tsx | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx
index c52c9949a37b..bf129ce421cd 100644
--- a/src/components/Form/FormWrapper.tsx
+++ b/src/components/Form/FormWrapper.tsx
@@ -178,6 +178,7 @@ function FormWrapper({
                     enterKeyEventListenerPriority={1}
                     shouldRenderFooterAboveSubmit={shouldRenderFooterAboveSubmit}
                     shouldBlendOpacity={shouldSubmitButtonBlendOpacity}
+                    shouldPreventBlur
                 />
             ),
         [
diff --git a/src/components/FormAlertWithSubmitButton.tsx b/src/components/FormAlertWithSubmitButton.tsx
index 9198aa04e63e..d536fbdb5840 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. */
+    shouldPreventBlur?: boolean;
 };
 
 function FormAlertWithSubmitButton({
@@ -98,6 +101,7 @@ function FormAlertWithSubmitButton({
     shouldRenderFooterAboveSubmit = false,
     shouldBlendOpacity = false,
     addButtonBottomPadding = true,
+    shouldPreventBlur = 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={shouldPreventBlur ? (e) => e.preventDefault() : undefined}
                         />
                     ) : (
                         <Button
@@ -146,6 +151,7 @@ function FormAlertWithSubmitButton({
                             danger={isSubmitActionDangerous}
                             medium={useSmallerSubmitButtonSize}
                             large={!useSmallerSubmitButtonSize}
+                            onMouseDown={shouldPreventBlur ? (e) => e.preventDefault() : undefined}
                         />
                     )}
                     {!shouldRenderFooterAboveSubmit && footerContent}

From 88e46d7e0122701b3572e7b763dc29904b725e6c Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Thu, 29 May 2025 20:50:17 +0700
Subject: [PATCH 2/4] fix: update prop

---
 src/components/Form/FormWrapper.tsx          | 2 +-
 src/components/FormAlertWithSubmitButton.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx
index bf129ce421cd..62201ee0af01 100644
--- a/src/components/Form/FormWrapper.tsx
+++ b/src/components/Form/FormWrapper.tsx
@@ -178,7 +178,7 @@ function FormWrapper({
                     enterKeyEventListenerPriority={1}
                     shouldRenderFooterAboveSubmit={shouldRenderFooterAboveSubmit}
                     shouldBlendOpacity={shouldSubmitButtonBlendOpacity}
-                    shouldPreventBlur
+                    shouldPreventDefaultFocusOnPress
                 />
             ),
         [
diff --git a/src/components/FormAlertWithSubmitButton.tsx b/src/components/FormAlertWithSubmitButton.tsx
index d536fbdb5840..2feeaa43bca2 100644
--- a/src/components/FormAlertWithSubmitButton.tsx
+++ b/src/components/FormAlertWithSubmitButton.tsx
@@ -76,7 +76,7 @@ type FormAlertWithSubmitButtonProps = {
     addButtonBottomPadding?: boolean;
 
     /** Prevents the button from triggering blur on mouse down. */
-    shouldPreventBlur?: boolean;
+    shouldPreventDefaultFocusOnPress?: boolean;
 };
 
 function FormAlertWithSubmitButton({
@@ -101,7 +101,7 @@ function FormAlertWithSubmitButton({
     shouldRenderFooterAboveSubmit = false,
     shouldBlendOpacity = false,
     addButtonBottomPadding = true,
-    shouldPreventBlur = false,
+    shouldPreventDefaultFocusOnPress = false,
 }: FormAlertWithSubmitButtonProps) {
     const styles = useThemeStyles();
     const style = [footerContent && addButtonBottomPadding ? styles.mb3 : {}, buttonStyles];
@@ -134,7 +134,7 @@ function FormAlertWithSubmitButton({
                             danger={isSubmitActionDangerous}
                             medium={useSmallerSubmitButtonSize}
                             large={!useSmallerSubmitButtonSize}
-                            onMouseDown={shouldPreventBlur ? (e) => e.preventDefault() : undefined}
+                            onMouseDown={shouldPreventDefaultFocusOnPress ? (e) => e.preventDefault() : undefined}
                         />
                     ) : (
                         <Button
@@ -151,7 +151,7 @@ function FormAlertWithSubmitButton({
                             danger={isSubmitActionDangerous}
                             medium={useSmallerSubmitButtonSize}
                             large={!useSmallerSubmitButtonSize}
-                            onMouseDown={shouldPreventBlur ? (e) => e.preventDefault() : undefined}
+                            onMouseDown={shouldPreventDefaultFocusOnPress ? (e) => e.preventDefault() : undefined}
                         />
                     )}
                     {!shouldRenderFooterAboveSubmit && footerContent}

From 55f5bf07516509bb30d6627a27deb997d0769309 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Fri, 30 May 2025 15:50:40 +0700
Subject: [PATCH 3/4] fix: Only appeaer the change in scope of the bug

---
 src/components/Form/FormProvider.tsx                     | 5 +++++
 src/components/Form/FormWrapper.tsx                      | 6 +++++-
 src/pages/workspace/companyCards/addNew/CardNameStep.tsx | 1 +
 3 files changed, 11 insertions(+), 1 deletion(-)

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<TFormID extends OnyxFormKey = OnyxFormKey> = FormProps<TF
 
     /** Fires at most once per frame during scrolling. */
     onScroll?: () => 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<FormRef>,
@@ -438,6 +442,7 @@ function FormProvider(
                 isLoading={isLoading}
                 enabledWhenOffline={enabledWhenOffline}
                 shouldRenderFooterAboveSubmit={shouldRenderFooterAboveSubmit}
+                shouldPreventDefaultFocusOnPressSubmit={shouldPreventDefaultFocusOnPressSubmit}
             >
                 {typeof children === 'function' ? children({inputValues}) : children}
             </FormWrapper>
diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx
index 62201ee0af01..5d64ca3f5de2 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,7 +182,7 @@ function FormWrapper({
                     enterKeyEventListenerPriority={1}
                     shouldRenderFooterAboveSubmit={shouldRenderFooterAboveSubmit}
                     shouldBlendOpacity={shouldSubmitButtonBlendOpacity}
-                    shouldPreventDefaultFocusOnPress
+                    shouldPreventDefaultFocusOnPress={shouldPreventDefaultFocusOnPressSubmit}
                 />
             ),
         [
diff --git a/src/pages/workspace/companyCards/addNew/CardNameStep.tsx b/src/pages/workspace/companyCards/addNew/CardNameStep.tsx
index 9c3943dd4904..3cfd0dd187c8 100644
--- a/src/pages/workspace/companyCards/addNew/CardNameStep.tsx
+++ b/src/pages/workspace/companyCards/addNew/CardNameStep.tsx
@@ -67,6 +67,7 @@ function CardNameStep() {
                 enabledWhenOffline
                 shouldHideFixErrorsAlert
                 addBottomSafeAreaPadding
+                shouldPreventDefaultFocusOnPressSubmit
             >
                 <InputWrapper
                     InputComponent={TextInput}

From 7ef2f14c99bf91d7b6fa5c1fa62bf723f8227a96 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Fri, 30 May 2025 15:53:28 +0700
Subject: [PATCH 4/4] fix: lint

---
 src/components/Form/FormWrapper.tsx                      | 1 +
 src/pages/workspace/companyCards/addNew/CardNameStep.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx
index 5d64ca3f5de2..86b3f6cc8a03 100644
--- a/src/components/Form/FormWrapper.tsx
+++ b/src/components/Form/FormWrapper.tsx
@@ -211,6 +211,7 @@ function FormWrapper({
             submitButtonText,
             submitFlexEnabled,
             shouldRenderFooterAboveSubmit,
+            shouldPreventDefaultFocusOnPressSubmit,
         ],
     );
 
diff --git a/src/pages/workspace/companyCards/addNew/CardNameStep.tsx b/src/pages/workspace/companyCards/addNew/CardNameStep.tsx
index 3cfd0dd187c8..e03dc44c3ea0 100644
--- a/src/pages/workspace/companyCards/addNew/CardNameStep.tsx
+++ b/src/pages/workspace/companyCards/addNew/CardNameStep.tsx
@@ -21,7 +21,7 @@ function CardNameStep() {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const {inputCallbackRef} = useAutoFocusInput();
-    const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD);
+    const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD, {canBeMissing: true});
 
     const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.ADD_NEW_CARD_FEED_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.ADD_NEW_CARD_FEED_FORM> => {
         const errors = getFieldRequiredErrors(values, [INPUT_IDS.CARD_TITLE]);