Fix keyboard issues in add attachment flow

src/components/AttachmentPicker/attachmentPickerPropTypes.js

@@ -24,10 +24,14 @@ const propTypes = {
 
     /** The types of files that can be selected with this picker. */
     type: PropTypes.oneOf([CONST.ATTACHMENT_PICKER_TYPE.FILE, CONST.ATTACHMENT_PICKER_TYPE.IMAGE]),
+
+    /** Optional callback to fire when we want to do something on close. */
+    onClose: PropTypes.func,
 };
 
 const defaultProps = {
     type: CONST.ATTACHMENT_PICKER_TYPE.FILE,
+    onClose: () => {},
 };
 
 export {

src/components/AttachmentPicker/index.js

@@ -49,12 +49,21 @@ class AttachmentPicker extends React.Component {
 
                     // We are stopping the event propagation because triggering the `click()` on the hidden input
                     // causes the event to unexpectedly bubble up to anything wrapping this component e.g. Pressable
-                    onClick={e => e.stopPropagation()}
+                    onClick={(e) => {
+                        e.stopPropagation();
+
+                        // We add this focus event listener to call the onClose callback when user does not select any files
+                        // i.e. clicks cancel in the native file picker modal - this is when the app gets the focus back
+                        window.addEventListener('focus', this.onClose, {
+                            once: true, // this removes the listener after running once
+                        });
+                    }}
                     accept={getAcceptableFileTypes(this.props.type)}
                 />
                 {this.props.children({
-                    openPicker: ({onPicked}) => {
+                    openPicker: ({onPicked, onClose}) => {
                         this.onPicked = onPicked;
+                        this.onClose = onClose;
                         this.fileInput.click();
                     },
                 })}

src/components/AttachmentPicker/index.native.js

@@ -98,6 +98,7 @@ class AttachmentPicker extends Component {
 
         this.state = {
             isVisible: false,
+            onClose: () => {},
         };
 
         this.menuItemData = [
@@ -187,6 +188,8 @@ class AttachmentPicker extends Component {
         return new Promise((resolve, reject) => {
             imagePickerFunc(getImagePickerOptions(this.props.type), (response) => {
                 if (response.didCancel) {
+                    this.state.onClose();
+
                     // When the user cancelled resolve with no attachment
                     return resolve();
                 }
@@ -237,6 +240,7 @@ class AttachmentPicker extends Component {
     showDocumentPicker() {
         return RNDocumentPicker.pick(documentPickerOptions).catch((error) => {
             if (RNDocumentPicker.isCancel(error)) {
+                this.state.onClose();
                 return;
             }
 
@@ -299,15 +303,23 @@ class AttachmentPicker extends Component {
       */
     renderChildren() {
         return this.props.children({
-            openPicker: ({onPicked}) => this.open(onPicked),
+            openPicker: ({onPicked, onClose}) => {
+                this.open(onPicked);
+                if (onClose) {
+                    this.setState({onClose});
+                }
+            },
         });
     }
 
     render() {
         return (
             <>
                 <Popover
-                    onClose={this.close}
+                    onClose={() => {
+                        this.close();
+                        this.state.onClose();
+                    }}
                     isVisible={this.state.isVisible}
                     anchorPosition={styles.createMenuPosition}
                     onModalHide={this.onModalHide}

src/components/Modal/index.ios.js

@@ -1,18 +1,46 @@
-import React from 'react';
+import React, {useState, useEffect} from 'react';
+import {Keyboard} from 'react-native';
+import compose from '../../libs/compose';
+import withKeyboardState from '../withKeyboardState';
 import withWindowDimensions from '../withWindowDimensions';
 import BaseModal from './BaseModal';
 import {propTypes, defaultProps} from './modalPropTypes';
 
-const Modal = props => (
-    <BaseModal
-            // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-    >
-        {props.children}
-    </BaseModal>
-);
+const Modal = (props) => {
+    const [isVisible, setIsVisible] = useState(false);
+
+    // This closes the keyboard before opening the modal to avoid the issue where iOS automatically reopens
+    // the keyboard if it was already open before any modals were opened. We manage the keyboard behaviour
+    // explicitly at other places in the app to be consistent across all platforms
+    useEffect(() => {
+        if (!props.isVisible) {
+            setIsVisible(false);
+        } else if (props.isKeyboardShown) {
+            const keyboardListener = Keyboard.addListener('keyboardDidHide', () => {
+                setIsVisible(true);
+                keyboardListener.remove();
+            });
+            Keyboard.dismiss();
+        } else {
+            setIsVisible(true);
+        }
+    }, [props.isVisible, props.isKeyboardShown]);
+
+    return (
+        <BaseModal
+        // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            isVisible={isVisible}
+        >
+            {props.children}
+        </BaseModal>
+    );
+};
 
 Modal.propTypes = propTypes;
 Modal.defaultProps = defaultProps;
 Modal.displayName = 'Modal';
-export default withWindowDimensions(Modal);
+export default compose(
+    withWindowDimensions,
+    withKeyboardState,
+)(Modal);

src/pages/home/report/ReportActionCompose.js

@@ -132,13 +132,15 @@ class ReportActionCompose extends React.Component {
         this.getInputPlaceholder = this.getInputPlaceholder.bind(this);
         this.getIOUOptions = this.getIOUOptions.bind(this);
         this.addAttachment = this.addAttachment.bind(this);
+        this.finishAddAttachmentFlow = this.finishAddAttachmentFlow.bind(this);
         this.comment = props.comment;
 
         // React Native will retain focus on an input for native devices but web/mWeb behave differently so we have some focus management
         // code that will refocus the compose input after a user closes a modal or some other actions, see usage of ReportActionComposeFocusManager
         this.willBlurTextInputOnTapOutside = willBlurTextInputOnTapOutside();
 
         this.state = {
+            isInAddAttachmentFlow: false,
             isFocused: this.willBlurTextInputOnTapOutside && !this.props.modal.isVisible && !this.props.modal.willAlertModalBecomeVisible,
             isFullComposerAvailable: props.isComposerFullSize,
             textInputShouldClear: false,
@@ -179,7 +181,7 @@ class ReportActionCompose extends React.Component {
         // We want to focus or refocus the input when a modal has been closed and the underlying screen is focused.
         // We avoid doing this on native platforms since the software keyboard popping
         // open creates a jarring and broken UX.
-        if (this.willBlurTextInputOnTapOutside && this.props.isFocused
+        if (this.willBlurTextInputOnTapOutside && this.props.isFocused && !this.state.isInAddAttachmentFlow
             && prevProps.modal.isVisible && !this.props.modal.isVisible) {
             this.focus();
         }
@@ -302,6 +304,15 @@ class ReportActionCompose extends React.Component {
         this.setState({maxLines});
     }
 
+    /**
+     * Set isInAddAttachmentFlow state
+     *
+     * @param {Boolean} value
+     */
+    setIsInAddAttachmentFlow(value) {
+        this.setState({isInAddAttachmentFlow: value});
+    }
+
     isEmptyChat() {
         return _.size(this.props.reportActions) === 1;
     }
@@ -473,6 +484,17 @@ class ReportActionCompose extends React.Component {
         this.setTextInputShouldClear(false);
     }
 
+    /**
+     * Set the focus back to the composer
+     */
+    finishAddAttachmentFlow() {
+        this.setIsInAddAttachmentFlow(false);
+
+        // Explicitly focus the composer from here as componentDidUpdate does not do that in native
+        // because willBlurTextInputOnTapOutside is false on native which doesn't let it focus
+        this.focus(true);
+    }
+
     /**
      * Add a new comment to this chat
      *
@@ -535,6 +557,7 @@ class ReportActionCompose extends React.Component {
                 ]}
                 >
                     <AttachmentModal
+                        onModalHide={this.finishAddAttachmentFlow}
                         headerTitle={this.props.translate('reportActionCompose.sendAttachment')}
                         onConfirm={this.addAttachment}
                     >
@@ -592,6 +615,10 @@ class ReportActionCompose extends React.Component {
 
                                                                 // Drop focus to avoid blue focus ring.
                                                                 this.actionButton.blur();
+
+                                                                // we blur the input here to avoid an android specific issue where the keyboard
+                                                                // doesn't open when we re-focus the input due to it never losing focus
+                                                                this.textInput.blur();
                                                                 this.setMenuVisibility(true);
                                                             }}
                                                             style={styles.composerSizeButton}
@@ -605,16 +632,24 @@ class ReportActionCompose extends React.Component {
                                             <PopoverMenu
                                                 animationInTiming={CONST.ANIMATION_IN_TIMING}
                                                 isVisible={this.state.isMenuVisible}
-                                                onClose={() => this.setMenuVisibility(false)}
-                                                onItemSelected={() => this.setMenuVisibility(false)}
+                                                onClose={() => {
+                                                    this.setMenuVisibility(false);
+                                                    this.finishAddAttachmentFlow();
+                                                }}
+                                                onItemSelected={() => {
+                                                    this.setMenuVisibility(false);
+                                                    this.setIsInAddAttachmentFlow(false);
+                                                }}
                                                 anchorPosition={styles.createMenuPositionReportActionCompose}
                                                 menuItems={[...this.getIOUOptions(reportParticipants),
                                                     {
                                                         icon: Expensicons.Paperclip,
                                                         text: this.props.translate('reportActionCompose.addAttachment'),
                                                         onSelected: () => {
+                                                            this.setIsInAddAttachmentFlow(true);
                                                             openPicker({
                                                                 onPicked: displayFileInModal,
+                                                                onClose: this.finishAddAttachmentFlow,
                                                             });
                                                         },
                                                     },