Merge pull request #21367 from dukenv0307/fix/19156

Fix/19156: Keyboard does not hide when switching between attachments with focused password input field

src/components/AttachmentCarousel/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {View, FlatList, PixelRatio} from 'react-native';
+import {View, FlatList, PixelRatio, Keyboard} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -195,6 +195,7 @@ class AttachmentCarousel extends React.Component {
             shouldShowArrow: this.canUseTouchScreen,
             containerWidth: 0,
             isZoomed: false,
+            activeSource: null,
         };
     }
 
@@ -225,16 +226,18 @@ class AttachmentCarousel extends React.Component {
      * @param {Array<{item: {source, file}, index: Number}>} viewableItems
      */
     updatePage({viewableItems}) {
+        Keyboard.dismiss();
         // Since we can have only one item in view at a time, we can use the first item in the array
         // to get the index of the current page
         const entry = _.first(viewableItems);
         if (!entry) {
+            this.setState({activeSource: null});
             return;
         }
 
         const page = entry.index;
         this.props.onNavigate(entry.item);
-        this.setState({page, isZoomed: false});
+        this.setState({page, isZoomed: false, activeSource: entry.item.source});
     }
 
     /**
@@ -265,6 +268,7 @@ class AttachmentCarousel extends React.Component {
     renderItem({item}) {
         return (
             <AttachmentView
+                isFocused={this.state.activeSource === item.source}
                 source={item.source}
                 file={item.file}
                 isAuthTokenRequired={item.isAuthTokenRequired}
@@ -335,6 +339,7 @@ class AttachmentCarousel extends React.Component {
 
                 {this.state.containerWidth > 0 && (
                     <FlatList
+                        keyboardShouldPersistTaps="handled"
                         listKey="AttachmentCarousel"
                         horizontal
                         decelerationRate="fast"

src/components/AttachmentView.js

@@ -35,6 +35,9 @@ const propTypes = {
     /** Flag to show the loading indicator */
     shouldShowLoadingSpinnerIcon: PropTypes.bool,
 
+    /** Whether this view is the active screen  */
+    isFocused: PropTypes.bool,
+
     /** Function for handle on press */
     onPress: PropTypes.func,
 
@@ -62,6 +65,7 @@ const defaultProps = {
     onScaleChanged: () => {},
     onToggleKeyboard: () => {},
     containerStyles: [],
+    isFocused: false,
 };
 
 function AttachmentView(props) {
@@ -86,6 +90,7 @@ function AttachmentView(props) {
         const children = (
             <PDFView
                 onPress={props.onPress}
+                isFocused={props.isFocused}
                 sourceURL={sourceURL}
                 style={styles.imageModalPDF}
                 onToggleKeyboard={props.onToggleKeyboard}

src/components/PDFView/PDFPasswordForm.js

@@ -30,6 +30,9 @@ const propTypes = {
     /** Notify parent that a text field has been focused or blurred */
     onPasswordFieldFocused: PropTypes.func,
 
+    /** Should focus to the password input  */
+    isFocused: PropTypes.bool.isRequired,
+
     ...withLocalizePropTypes,
     ...windowDimensionsPropTypes,
 };
@@ -56,6 +59,13 @@ class PDFPasswordForm extends Component {
         this.validateAndNotifyPasswordBlur = this.validateAndNotifyPasswordBlur.bind(this);
     }
 
+    componentDidUpdate(prevProps) {
+        if (prevProps.isFocused || !this.props.isFocused || !this.textInputRef) {
+            return;
+        }
+        this.textInputRef.focus();
+    }
+
     submitPassword() {
         if (!this.validate()) {
             return;
@@ -105,6 +115,7 @@ class PDFPasswordForm extends Component {
                             <Text>{this.props.translate('attachmentView.pdfPasswordForm.formLabel')}</Text>
                         </View>
                         <TextInput
+                            ref={(el) => (this.textInputRef = el)}
                             label={this.props.translate('common.password')}
                             /**
                              * This is a workaround to bypass Safari's autofill odd behaviour.

src/components/PDFView/index.js

@@ -150,6 +150,7 @@ class PDFView extends Component {
                 </View>
                 {this.state.shouldRequestPassword && (
                     <PDFPasswordForm
+                        isFocused={this.props.isFocused}
                         onSubmit={this.attemptPDFLoad}
                         onPasswordUpdated={() => this.setState({isPasswordInvalid: false})}
                         isPasswordInvalid={this.state.isPasswordInvalid}

src/components/PDFView/index.native.js

@@ -158,6 +158,7 @@ class PDFView extends Component {
                 {this.state.shouldRequestPassword && (
                     <KeyboardAvoidingView style={styles.flex1}>
                         <PDFPasswordForm
+                            isFocused={this.props.isFocused}
                             onSubmit={this.attemptPDFLoadWithPassword}
                             onPasswordUpdated={() => this.setState({isPasswordInvalid: false})}
                             isPasswordInvalid={this.state.isPasswordInvalid}

src/components/PDFView/pdfViewPropTypes.js

@@ -21,6 +21,9 @@ const propTypes = {
     /** Handles load complete event in PDF component */
     onLoadComplete: PropTypes.func,
 
+    /** Should focus to the password input  */
+    isFocused: PropTypes.bool,
+
     ...windowDimensionsPropTypes,
 };
 
@@ -31,6 +34,7 @@ const defaultProps = {
     onToggleKeyboard: () => {},
     onScaleChanged: () => {},
     onLoadComplete: () => {},
+    isFocused: false,
 };
 
 export {propTypes, defaultProps};