fix keyboard flashing while clicking "Add attachment"

patches/react-native+0.72.3+004+ModalKeyboardFlashing.patch

@@ -0,0 +1,15 @@
+diff --git a/node_modules/react-native/React/Views/RCTModalHostViewManager.m b/node_modules/react-native/React/Views/RCTModalHostViewManager.m
+index 4b9f9ad..4992874 100644
+--- a/node_modules/react-native/React/Views/RCTModalHostViewManager.m
++++ b/node_modules/react-native/React/Views/RCTModalHostViewManager.m
+@@ -79,6 +79,10 @@ RCT_EXPORT_MODULE()
+     if (self->_presentationBlock) {
+       self->_presentationBlock([modalHostView reactViewController], viewController, animated, completionBlock);
+     } else {
++      UIWindow *window = RCTKeyWindow();
++      if (window && window.rootViewController && [window.rootViewController.view isFirstResponder]) {
++        [window.rootViewController.view resignFirstResponder];
++      }
+       [[modalHostView reactViewController] presentViewController:viewController
+                                                         animated:animated
+                                                       completion:completionBlock];

src/components/AttachmentPicker/index.js

@@ -27,6 +27,8 @@ function getAcceptableFileTypes(type) {
 function AttachmentPicker(props) {
     const fileInput = useRef();
     const onPicked = useRef();
+    const onCanceled = useRef(() => {});
+
     return (
         <>
             <input
@@ -46,13 +48,20 @@ function AttachmentPicker(props) {
                 }}
                 // 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();
+                    if (!fileInput.current) {
+                        return;
+                    }
+                    fileInput.current.addEventListener('cancel', () => onCanceled.current(), {once: true});
+                }}
                 accept={getAcceptableFileTypes(props.type)}
             />
             {props.children({
-                openPicker: ({onPicked: newOnPicked}) => {
+                openPicker: ({onPicked: newOnPicked, onCanceled: newOnCanceled = () => {}}) => {
                     onPicked.current = newOnPicked;
                     fileInput.current.click();
+                    onCanceled.current = newOnCanceled;
                 },
             })}
         </>

src/components/AttachmentPicker/index.native.js

@@ -126,6 +126,7 @@ class AttachmentPicker extends Component {
             });
         }
 
+        this.cancel = () => {};
         this.close = this.close.bind(this);
         this.pickAttachment = this.pickAttachment.bind(this);
         this.removeKeyboardListener = this.removeKeyboardListener.bind(this);
@@ -181,6 +182,7 @@ class AttachmentPicker extends Component {
      */
     pickAttachment(attachments = []) {
         if (attachments.length === 0) {
+            this.cancel();
             return;
         }
 
@@ -342,15 +344,21 @@ class AttachmentPicker extends Component {
      */
     renderChildren() {
         return this.props.children({
-            openPicker: ({onPicked}) => this.open(onPicked),
+            openPicker: ({onPicked, onCanceled = () => {}}) => {
+                this.open(onPicked);
+                this.cancel = onCanceled;
+            },
         });
     }
 
     render() {
         return (
             <>
                 <Popover
-                    onClose={this.close}
+                    onClose={() => {
+                        this.close();
+                        this.cancel();
+                    }}
                     isVisible={this.state.isVisible}
                     anchorPosition={styles.createMenuPosition}
                     onModalHide={this.onModalHide}

src/components/Modal/BaseModal.js

@@ -10,6 +10,7 @@ import {propTypes as modalPropTypes, defaultProps as modalDefaultProps} from './
 import * as Modal from '../../libs/actions/Modal';
 import getModalStyles from '../../styles/getModalStyles';
 import variables from '../../styles/variables';
+import ComposerFocusManager from '../../libs/ComposerFocusManager';
 
 const propTypes = {
     ...modalPropTypes,
@@ -73,6 +74,9 @@ class BaseModal extends PureComponent {
             this.props.onModalHide();
         }
         Modal.onModalDidClose();
+        if (!this.props.fullscreen) {
+            ComposerFocusManager.setReadyToFocus();
+        }
     }
 
     render() {
@@ -109,6 +113,9 @@ class BaseModal extends PureComponent {
                 // Note: Escape key on web/desktop will trigger onBackButtonPress callback
                 // eslint-disable-next-line react/jsx-props-no-multi-spaces
                 onBackButtonPress={this.props.onClose}
+                onModalWillShow={() => {
+                    ComposerFocusManager.resetReadyToFocus();
+                }}
                 onModalShow={() => {
                     if (this.props.shouldSetModalVisibility) {
                         Modal.setModalVisibility(true);
@@ -117,6 +124,7 @@ class BaseModal extends PureComponent {
                 }}
                 propagateSwipe={this.props.propagateSwipe}
                 onModalHide={this.hideModal}
+                onDismiss={() => ComposerFocusManager.setReadyToFocus()}
                 onSwipeComplete={this.props.onClose}
                 swipeDirection={swipeDirection}
                 isVisible={this.props.isVisible}

src/components/Modal/index.android.js

@@ -1,7 +1,17 @@
 import React from 'react';
+import {AppState} from 'react-native';
 import withWindowDimensions from '../withWindowDimensions';
 import BaseModal from './BaseModal';
 import {propTypes, defaultProps} from './modalPropTypes';
+import ComposerFocusManager from '../../libs/ComposerFocusManager';
+
+AppState.addEventListener('focus', () => {
+    ComposerFocusManager.setReadyToFocus();
+});
+
+AppState.addEventListener('blur', () => {
+    ComposerFocusManager.resetReadyToFocus();
+});
 
 // Only want to use useNativeDriver on Android. It has strange flashes issue on IOS
 // https://github.com/react-native-modal/react-native-modal#the-modal-flashes-in-a-weird-way-when-animating

src/libs/ComposerFocusManager.js

@@ -0,0 +1,23 @@
+let isReadyToFocusPromise = Promise.resolve();
+let resolveIsReadyToFocus;
+
+function resetReadyToFocus() {
+    isReadyToFocusPromise = new Promise((resolve) => {
+        resolveIsReadyToFocus = resolve;
+    });
+}
+function setReadyToFocus() {
+    if (!resolveIsReadyToFocus) {
+        return;
+    }
+    resolveIsReadyToFocus();
+}
+function isReadyToFocus() {
+    return isReadyToFocusPromise;
+}
+
+export default {
+    resetReadyToFocus,
+    setReadyToFocus,
+    isReadyToFocus,
+};

src/pages/home/report/ReportActionCompose.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {View, LayoutAnimation, NativeModules, findNodeHandle} from 'react-native';
+import {View, InteractionManager, LayoutAnimation, NativeModules, findNodeHandle} from 'react-native';
 import {runOnJS} from 'react-native-reanimated';
 import {Gesture, GestureDetector} from 'react-native-gesture-handler';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import {withOnyx} from 'react-native-onyx';
-import focusWithDelay from '../../../libs/focusWithDelay';
 import styles from '../../../styles/styles';
 import themeColors from '../../../styles/themes/default';
 import Composer from '../../../components/Composer';
@@ -60,6 +59,7 @@ import * as KeyDownListener from '../../../libs/KeyboardShortcut/KeyDownPressLis
 import * as EmojiPickerActions from '../../../libs/actions/EmojiPickerAction';
 import withAnimatedRef from '../../../components/withAnimatedRef';
 import updatePropsPaperWorklet from '../../../libs/updatePropsPaperWorklet';
+import ComposerFocusManager from '../../../libs/ComposerFocusManager';
 
 const propTypes = {
     /** Beta features list */
@@ -178,7 +178,7 @@ class ReportActionCompose extends React.Component {
         this.submitForm = this.submitForm.bind(this);
         this.setIsFocused = this.setIsFocused.bind(this);
         this.setIsFullComposerAvailable = this.setIsFullComposerAvailable.bind(this);
-        this.focus = focusWithDelay(this.textInput).bind(this);
+        this.focus = this.focus.bind(this);
         this.replaceSelectionWithText = this.replaceSelectionWithText.bind(this);
         this.focusComposerOnKeyPress = this.focusComposerOnKeyPress.bind(this);
         this.checkComposerVisibility = this.checkComposerVisibility.bind(this);
@@ -223,6 +223,8 @@ class ReportActionCompose extends React.Component {
         this.unsubscribeNavigationBlur = () => null;
         this.unsubscribeNavigationFocus = () => null;
 
+        this.shouldFocusAfterClosingModal = true;
+
         this.state = {
             isFocused: this.shouldFocusInputOnScreenFocus && !this.props.modal.isVisible && !this.props.modal.willAlertModalBecomeVisible && this.props.shouldShowComposeInput,
             isFullComposerAvailable: props.isComposerFullSize,
@@ -271,10 +273,19 @@ class ReportActionCompose extends React.Component {
     }
 
     componentDidUpdate(prevProps) {
+        if (this.props.modal.isVisible && !prevProps.modal.isVisible) {
+            this.shouldFocusAfterClosingModal = true;
+        }
         // We want to focus or refocus the input when a modal has been closed or the underlying screen is refocused.
         // We avoid doing this on native platforms since the software keyboard popping
         // open creates a jarring and broken UX.
-        if (this.willBlurTextInputOnTapOutside && !this.props.modal.isVisible && this.props.isFocused && (prevProps.modal.isVisible || !prevProps.isFocused)) {
+        if (
+            this.willBlurTextInputOnTapOutside &&
+            this.shouldFocusAfterClosingModal &&
+            !this.props.modal.isVisible &&
+            this.props.isFocused &&
+            (prevProps.modal.isVisible || !prevProps.isFocused)
+        ) {
             this.focus();
         }
 
@@ -382,7 +393,6 @@ class ReportActionCompose extends React.Component {
         if (_.isFunction(this.props.animatedRef)) {
             this.props.animatedRef(el);
         }
-        this.focus = focusWithDelay(this.textInput).bind(this);
     }
 
     /**
@@ -743,6 +753,32 @@ class ReportActionCompose extends React.Component {
         this.replaceSelectionWithText(e.key, false);
     }
 
+    /**
+     * Focus the composer text input
+     * @param {Boolean} [shouldelay=false] Impose delay before focusing the composer
+     * @memberof ReportActionCompose
+     */
+    focus(shouldelay = false) {
+        // There could be other animations running while we trigger manual focus.
+        // This prevents focus from making those animations janky.
+        InteractionManager.runAfterInteractions(() => {
+            if (!this.textInput) {
+                return;
+            }
+
+            if (!shouldelay) {
+                this.textInput.focus();
+                return;
+            }
+            ComposerFocusManager.isReadyToFocus().then(() => {
+                if (!this.textInput) {
+                    return;
+                }
+                this.textInput.focus();
+            });
+        });
+    }
+
     /**
      * Save our report comment in Onyx. We debounce this method in the constructor so that it's not called too often
      * to update Onyx and re-render this component.
@@ -1012,6 +1048,7 @@ class ReportActionCompose extends React.Component {
                                 this.shouldBlockEmojiCalc = false;
                                 this.shouldBlockMentionCalc = false;
                                 this.setState({isAttachmentPreviewActive: false});
+                                this.focus(true);
                             }}
                         >
                             {({displayFileInModal}) => (
@@ -1025,8 +1062,12 @@ class ReportActionCompose extends React.Component {
                                                     this.shouldBlockEmojiCalc = true;
                                                     this.shouldBlockMentionCalc = true;
                                                 }
+                                                this.shouldFocusAfterClosingModal = false;
                                                 openPicker({
                                                     onPicked: displayFileInModal,
+                                                    onCanceled: () => {
+                                                        this.focus(true);
+                                                    },
                                                 });
                                             };
                                             const menuItems = [
@@ -1095,6 +1136,7 @@ class ReportActionCompose extends React.Component {
                                                                 ref={this.actionButtonRef}
                                                                 onPress={(e) => {
                                                                     e.preventDefault();
+                                                                    this.textInput.blur();
 
                                                                     // Drop focus to avoid blue focus ring.
                                                                     this.actionButtonRef.current.blur();
@@ -1112,7 +1154,10 @@ class ReportActionCompose extends React.Component {
                                                     <PopoverMenu
                                                         animationInTiming={CONST.ANIMATION_IN_TIMING}
                                                         isVisible={this.state.isMenuVisible}
-                                                        onClose={() => this.setMenuVisibility(false)}
+                                                        onClose={() => {
+                                                            this.setMenuVisibility(false);
+                                                            this.focus(true);
+                                                        }}
                                                         onItemSelected={(item, index) => {
                                                             this.setMenuVisibility(false);