fix: submit button overlapping form content

Expensify · May 17, 2024 · 49e9755 · 49e9755
1 parent f7195c0
commit 49e9755
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/src/components/Form/FormProvider.tsx b/src/components/Form/FormProvider.tsx
@@ -74,6 +74,9 @@ type FormProviderProps<TFormID extends OnyxFormKey = OnyxFormKey> = FormProvider
 
         /** Whether to apply flex to the submit button */
         submitFlexEnabled?: boolean;
+
+        /** Whether the form container should grow or adapt to the viewable available space */
+        shouldContainerGrow?: boolean;
     };
 
 function FormProvider(

diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx
@@ -32,6 +32,9 @@ type FormWrapperProps = ChildrenProps &
         /** Whether to apply flex to the submit button */
         submitFlexEnabled?: boolean;
 
+        /** Whether the form container should grow or adapt to the viewable available space */
+        shouldContainerGrow?: boolean;
+
         /** Server side errors keyed by microtime */
         errors: FormInputErrors;
 
@@ -60,6 +63,7 @@ function FormWrapper({
     scrollContextEnabled = false,
     shouldHideFixErrorsAlert = false,
     disablePressOnEnter = true,
+    shouldContainerGrow = true,
 }: FormWrapperProps) {
     const styles = useThemeStyles();
     const formRef = useRef<RNScrollView>(null);
@@ -155,7 +159,7 @@ function FormWrapper({
                 scrollContextEnabled ? (
                     <ScrollViewWithContext
                         style={[styles.w100, styles.flex1]}
-                        contentContainerStyle={styles.flex1}
+                        contentContainerStyle={shouldContainerGrow ? styles.flexGrow1 : styles.flex1}
                         keyboardShouldPersistTaps="handled"
                         ref={formRef}
                     >
@@ -164,7 +168,7 @@ function FormWrapper({
                 ) : (
                     <ScrollView
                         style={[styles.w100, styles.flex1]}
-                        contentContainerStyle={styles.flex1}
+                        contentContainerStyle={shouldContainerGrow ? styles.flexGrow1 : styles.flex1}
                         keyboardShouldPersistTaps="handled"
                         ref={formRef}
                     >

diff --git a/src/pages/iou/request/step/IOURequestStepWaypoint.tsx b/src/pages/iou/request/step/IOURequestStepWaypoint.tsx
@@ -194,6 +194,7 @@ function IOURequestStepWaypoint({
                     validate={validate}
                     onSubmit={submit}
                     submitFlexEnabled={false}
+                    shouldContainerGrow={false}
                     shouldValidateOnChange={false}
                     shouldValidateOnBlur={false}
                     isSubmitButtonVisible={isSubmitButtonVisible}