Fix issue with card modals being closed on keyboard focus (#5371)

29ki · May 17, 2024 · b98eedf · b98eedf
2 parents 6192fcf + 2cbcf61
commit b98eedf
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 12 deletions.
diff --git a/client/src/lib/components/Typography/TextInput/TextInput.tsx b/client/src/lib/components/Typography/TextInput/TextInput.tsx
@@ -16,7 +16,7 @@ const style = ({hasError = false}) => ({
   ...textStyles.Body16,
   backgroundColor: COLORS.PURE_WHITE,
   borderRadius: 16,
-  color: hasError ? COLORS.ERROR : undefined,
+  color: hasError ? COLORS.ERROR : textStyles.Body16.color,
 });
 
 const TextInput = styled.TextInput<TextInputProps>(style);

diff --git a/client/src/lib/components/VerificationCode/VerificationCode.tsx b/client/src/lib/components/VerificationCode/VerificationCode.tsx
@@ -36,10 +36,14 @@ type CellComponentProps = {
   onCellPress: () => void;
   onChangeText: (text: string) => void;
   hasError?: boolean;
+  autoFocus?: boolean;
 };
 
 const CellComponent = React.forwardRef<TextInput, CellComponentProps>(
-  ({value, onCellPress, onKeyPress, onChangeText, hasError}, ref) => (
+  (
+    {value, onCellPress, onKeyPress, onChangeText, hasError, autoFocus},
+    ref,
+  ) => (
     <TouchableOpacity onPress={onCellPress}>
       <Cell
         autoCorrect={false}
@@ -50,6 +54,7 @@ const CellComponent = React.forwardRef<TextInput, CellComponentProps>(
         onKeyPress={onKeyPress}
         selectTextOnFocus
         hasError={hasError}
+        autoFocus={autoFocus}
       />
     </TouchableOpacity>
   ),
@@ -113,6 +118,7 @@ const VerificationCode: React.FC<VerificationCodeProps> = ({
       id = setTimeout(() => {
         setCode([]);
         setShowError(false);
+        setFocusCells(true);
         cells[0].current?.focus();
       }, 300);
     }
@@ -167,6 +173,7 @@ const VerificationCode: React.FC<VerificationCodeProps> = ({
             onChangeText={updateCode(index)}
             onKeyPress={onKeyPress(index)}
             hasError={showError}
+            autoFocus={currentCell === index && prefillCode.length !== 6}
           />
         ))}
       </Row>

diff --git a/client/src/lib/navigation/ModalStack.tsx b/client/src/lib/navigation/ModalStack.tsx
@@ -153,7 +153,11 @@ const ModalStack = () => {
   const cardModalScreenOptions: BottomSheetNavigationOptions = useMemo(
     () => ({
       ...modalScreenOptions,
-      snapPoints: [200],
+      /*
+        A smaller snapPoint number would cause an issue where keyboard animation closes the modal
+        https://github.com/gorhom/react-native-bottom-sheet/issues/1602
+      */
+      snapPoints: [300],
       detached: true,
       bottomInset: 10,
       style: {

diff --git a/client/src/routes/modals/AddSessionByInviteModal/AddSessionByInviteModal.tsx b/client/src/routes/modals/AddSessionByInviteModal/AddSessionByInviteModal.tsx
@@ -7,11 +7,7 @@ import styled from 'styled-components/native';
 import {JoinSessionError} from '../../../../../shared/src/errors/Session';
 import {COLORS} from '../../../../../shared/src/constants/colors';
 import Gutters from '../../../lib/components/Gutters/Gutters';
-import {
-  Spacer16,
-  Spacer24,
-  Spacer8,
-} from '../../../lib/components/Spacers/Spacer';
+import {Spacer16, Spacer32} from '../../../lib/components/Spacers/Spacer';
 import {Body16} from '../../../lib/components/Typography/Body/Body';
 import VerificationCode from '../../../lib/components/VerificationCode/VerificationCode';
 import {ModalStackProps} from '../../../lib/navigation/constants/routes';
@@ -24,6 +20,11 @@ import useLogSessionMetricEvents from '../../../lib/sessions/hooks/useLogSession
 
 const ErrorText = styled(Body16)({color: COLORS.ERROR, textAlign: 'center'});
 
+const Container = styled(Gutters)({
+  flex: 1,
+  justifyContent: 'center',
+});
+
 const AddSessionModal = () => {
   const {t} = useTranslation('Modal.JoinSession');
   const {params: {inviteCode} = {}} =
@@ -69,8 +70,7 @@ const AddSessionModal = () => {
 
   return (
     <CardModal>
-      <Spacer24 />
-      <Gutters>
+      <Container>
         {errorString ? (
           <ErrorText>{errorString}</ErrorText>
         ) : (
@@ -83,8 +83,8 @@ const AddSessionModal = () => {
           onCodeType={onCodeType}
           onCodeCompleted={onCodeCompleted}
         />
-        <Spacer8 />
-      </Gutters>
+        <Spacer32 />
+      </Container>
     </CardModal>
   );
 };