Merge pull request #29331 from tienifr/fix/28841

fix: 28841 keyboard opens for a second when user switches to password protected PDF
Expensify · Oct 16, 2023 · 8e6a74c · 8e6a74c
2 parents 83d0dbf + 0a7b80b
commit 8e6a74c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/src/components/Attachments/AttachmentCarousel/index.native.js b/src/components/Attachments/AttachmentCarousel/index.native.js
@@ -104,10 +104,10 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, onClose,
      * @returns {JSX.Element}
      */
     const renderItem = useCallback(
-        ({item}) => (
+        ({item, isActive}) => (
             <CarouselItem
                 item={item}
-                isFocused={activeSource === item.source}
+                isFocused={isActive && activeSource === item.source}
                 onPress={() => setShouldShowArrows(!shouldShowArrows)}
             />
         ),

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
@@ -50,6 +50,8 @@ function PDFPasswordForm({isFocused, isPasswordInvalid, shouldShowLoadingIndicat
     const [shouldShowForm, setShouldShowForm] = useState(false);
     const textInputRef = useRef(null);
 
+    const focusTimeoutRef = useRef(null);
+
     const errorText = useMemo(() => {
         if (isPasswordInvalid) {
             return translate('attachmentView.passwordIncorrect');
@@ -67,7 +69,19 @@ function PDFPasswordForm({isFocused, isPasswordInvalid, shouldShowLoadingIndicat
         if (!textInputRef.current) {
             return;
         }
-        textInputRef.current.focus();
+        /**
+         * We recommend using setTimeout to wait for the animation to finish and then focus on the input
+         * Relevant thread: https://expensify.slack.com/archives/C01GTK53T8Q/p1694660990479979
+         */
+        focusTimeoutRef.current = setTimeout(() => {
+            textInputRef.current.focus();
+        }, CONST.ANIMATED_TRANSITION);
+        return () => {
+            if (!focusTimeoutRef.current) {
+                return;
+            }
+            clearTimeout(focusTimeoutRef.current);
+        };
     }, [isFocused]);
 
     const updatePassword = (newPassword) => {