chore: persist taps from keyboard

artsy · Jun 7, 2024 · da3922f · da3922f
1 parent c6adae8
commit da3922f
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 64 deletions.
diff --git a/src/app/Scenes/SellWithArtsy/ArtworkForm/Components/SubmitArtworkAddDetails.tsx b/src/app/Scenes/SellWithArtsy/ArtworkForm/Components/SubmitArtworkAddDetails.tsx
@@ -30,7 +30,7 @@ export const SubmitArtworkAddDetails = () => {
       })}
     >
       <Flex px={2} flex={1}>
-        <ScrollView>
+        <ScrollView keyboardShouldPersistTaps="handled">
           <Text variant="lg-display" mb={2}>
             Artwork details
           </Text>

diff --git a/src/app/Scenes/SellWithArtsy/ArtworkForm/Components/SubmitArtworkAddDimensions.tsx b/src/app/Scenes/SellWithArtsy/ArtworkForm/Components/SubmitArtworkAddDimensions.tsx
@@ -5,6 +5,7 @@ import { ProvideScreenTrackingWithCohesionSchema } from "app/utils/track"
 import { screen } from "app/utils/track/helpers"
 import { useFormikContext } from "formik"
 import { useRef, useState } from "react"
+import { ScrollView } from "react-native"
 import { useDebounce } from "react-use"
 
 export const SubmitArtworkAddDimensions = () => {
@@ -30,77 +31,79 @@ export const SubmitArtworkAddDimensions = () => {
         context_screen_owner_id: values.submissionId || undefined,
       })}
     >
-      <Flex px={2}>
-        <Text variant="lg-display" mb={2}>
-          Artwork dimensions
-        </Text>
+      <Flex px={2} flex={1}>
+        <ScrollView>
+          <Text variant="lg-display" mb={2}>
+            Artwork dimensions
+          </Text>
 
-        <Flex flexDirection="row">
-          <RadioButton
-            mr={2}
-            text="in"
-            selected={dimensionMetric === "in"}
-            onPress={() => {
-              setDimensionMetric("in")
-            }}
-          />
-          <RadioButton
-            text="cm"
-            selected={dimensionMetric === "cm"}
-            onPress={() => {
-              setDimensionMetric("cm")
-            }}
-          />
-        </Flex>
-
-        <Spacer y={1} />
-
-        <Flex flexDirection="row" justifyContent="space-between">
-          <Box flex={1}>
-            <Input
-              title="Height"
-              keyboardType="decimal-pad"
-              testID="Submission_HeightInput"
-              value={values.height}
-              onChangeText={(e) => setFieldValue("height", e)}
-              fixedRightPlaceholder={dimensionMetric}
-              accessibilityLabel="Height"
-              onSubmitEditing={() => {
-                widthRef.current?.focus()
+          <Flex flexDirection="row">
+            <RadioButton
+              mr={2}
+              text="in"
+              selected={dimensionMetric === "in"}
+              onPress={() => {
+                setDimensionMetric("in")
               }}
-              returnKeyLabel="Next"
             />
-          </Box>
-          <Spacer x={2} />
-          <Box flex={1}>
+            <RadioButton
+              text="cm"
+              selected={dimensionMetric === "cm"}
+              onPress={() => {
+                setDimensionMetric("cm")
+              }}
+            />
+          </Flex>
+
+          <Spacer y={1} />
+
+          <Flex flexDirection="row" justifyContent="space-between">
+            <Box flex={1}>
+              <Input
+                title="Height"
+                keyboardType="decimal-pad"
+                testID="Submission_HeightInput"
+                value={values.height}
+                onChangeText={(e) => setFieldValue("height", e)}
+                fixedRightPlaceholder={dimensionMetric}
+                accessibilityLabel="Height"
+                onSubmitEditing={() => {
+                  widthRef.current?.focus()
+                }}
+                returnKeyLabel="Next"
+              />
+            </Box>
+            <Spacer x={2} />
+            <Box flex={1}>
+              <Input
+                title="Width"
+                keyboardType="decimal-pad"
+                testID="Submission_WidthInput"
+                value={values.width}
+                onChangeText={(e) => setFieldValue("width", e)}
+                fixedRightPlaceholder={dimensionMetric}
+                accessibilityLabel="Width"
+                ref={widthRef}
+                onSubmitEditing={() => {
+                  depthRef.current?.focus()
+                }}
+                returnKeyLabel="Next"
+              />
+            </Box>
+          </Flex>
+          <Box width="50%" pr={1}>
             <Input
-              title="Width"
+              title="Depth"
               keyboardType="decimal-pad"
-              testID="Submission_WidthInput"
-              value={values.width}
-              onChangeText={(e) => setFieldValue("width", e)}
+              testID="Submission_DepthInput"
+              value={values.depth}
+              onChangeText={(e) => setFieldValue("depth", e)}
               fixedRightPlaceholder={dimensionMetric}
-              accessibilityLabel="Width"
-              ref={widthRef}
-              onSubmitEditing={() => {
-                depthRef.current?.focus()
-              }}
-              returnKeyLabel="Next"
+              accessibilityLabel="Depth"
+              ref={depthRef}
             />
           </Box>
-        </Flex>
-        <Box width="50%" pr={1}>
-          <Input
-            title="Depth"
-            keyboardType="decimal-pad"
-            testID="Submission_DepthInput"
-            value={values.depth}
-            onChangeText={(e) => setFieldValue("depth", e)}
-            fixedRightPlaceholder={dimensionMetric}
-            accessibilityLabel="Depth"
-            ref={depthRef}
-          />
-        </Box>
+        </ScrollView>
       </Flex>
     </ProvideScreenTrackingWithCohesionSchema>
   )