Fix msafari focus

src/components/Form.js

@@ -17,6 +17,7 @@ import ScrollViewWithContext from './ScrollViewWithContext';
 import stylePropTypes from '../styles/stylePropTypes';
 import {withNetwork} from './OnyxProvider';
 import networkPropTypes from './networkPropTypes';
+import * as Browser from '../libs/Browser';
 import Visibility from '../libs/Visibility';
 
 const propTypes = {
@@ -534,6 +535,12 @@ export default compose(
     withOnyx({
         formState: {
             key: (props) => props.formID,
+            // The change was applied to make sure that Mobile Safari opens keyboard on autofocus.
+            // While performing some async calls (like to local storage) Safari was not behaving as expected -
+            // it requires so called "user interaction" to open keyboard - eg. a tap. Some longer async calls
+            // break the "chain" of user interaction events, which caused mSafari to not open keyboard correctly.
+            // That's why the isMobileSafari check was used to make sure that this change only applies there.
+            initWithStoredValues: !Browser.isMobileSafari(),
         },
         draftValues: {
             key: (props) => `${props.formID}Draft`,

src/components/Modal/BaseModal.js

@@ -24,6 +24,8 @@ const propTypes = {
 const defaultProps = {
     ...modalDefaultProps,
     forwardedRef: () => {},
+    coverScreen: true,
+    customBackdrop: null,
 };
 
 function BaseModal({
@@ -48,6 +50,8 @@ function BaseModal({
     onLayout,
     avoidKeyboard,
     forwardedRef,
+    coverScreen,
+    customBackdrop,
     children,
 }) {
     const {windowWidth, windowHeight, isSmallScreenWidth} = useWindowDimensions();
@@ -91,6 +95,9 @@ function BaseModal({
 
             // To prevent closing any modal already unmounted when this modal still remains as visible state
             Modal.setCloseModal(null);
+            if (shouldSetModalVisibility) {
+                Modal.setModalVisibility(false);
+            }
         },
         // eslint-disable-next-line react-hooks/exhaustive-deps
         [],
@@ -181,7 +188,8 @@ function BaseModal({
             backdropOpacity={hideBackdrop ? 0 : variables.overlayOpacity}
             backdropTransitionOutTiming={0}
             hasBackdrop={fullscreen}
-            coverScreen={fullscreen}
+            coverScreen={!isSmallScreenWidth || coverScreen}
+            customBackdrop={customBackdrop && customBackdrop(handleBackdropPress)}
             style={modalStyle}
             deviceHeight={windowHeight}
             deviceWidth={windowWidth}

src/components/Modal/index.web.js

@@ -1,11 +1,14 @@
 import React, {useState} from 'react';
+// eslint-disable-next-line no-restricted-imports
+import {Pressable} from 'react-native';
 import withWindowDimensions from '../withWindowDimensions';
 import BaseModal from './BaseModal';
 import {propTypes, defaultProps} from './modalPropTypes';
 import * as StyleUtils from '../../styles/StyleUtils';
 import themeColors from '../../styles/themes/default';
 import StatusBar from '../../libs/StatusBar';
 import CONST from '../../CONST';
+import styles from '../../styles/styles';
 
 function Modal(props) {
     const [previousStatusBarColor, setPreviousStatusBarColor] = useState();
@@ -40,6 +43,15 @@ function Modal(props) {
             onModalHide={hideModal}
             onModalShow={showModal}
             avoidKeyboard={false}
+            coverScreen={false}
+            customBackdrop={(onBackdropPress) => (
+                <Pressable
+                    onPress={onBackdropPress}
+                    style={styles.modalBackdropWeb}
+                    accessibilityLabel="backdrop"
+                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.ADJUSTABLE}
+                />
+            )}
         >
             {props.children}
         </BaseModal>

src/components/Modal/modalPropTypes.js

@@ -14,6 +14,12 @@ const propTypes = {
     /** Should we announce the Modal visibility changes? */
     shouldSetModalVisibility: PropTypes.bool,
 
+    /** Should we use coverScreen prop for ReactNativeModal? */
+    coverScreen: PropTypes.bool,
+
+    /** The customBackdrop prop allows the addition of a custom backdrop element behind the modal. */
+    customBackdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+
     /** Callback method fired when the user requests to close the modal */
     onClose: PropTypes.func.isRequired,
 

src/components/OptionsSelector/index.js

@@ -1,13 +1,18 @@
 import React, {forwardRef} from 'react';
 import BaseOptionsSelector from './BaseOptionsSelector';
+import useWindowDimensions from '../../hooks/useWindowDimensions';
 
-const OptionsSelector = forwardRef((props, ref) => (
-    <BaseOptionsSelector
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        ref={ref}
-    />
-));
+const OptionsSelector = forwardRef((props, ref) => {
+    const {isSmallScreenWidth} = useWindowDimensions();
+    return (
+        <BaseOptionsSelector
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            ref={ref}
+            shouldDelayFocus={!isSmallScreenWidth}
+        />
+    );
+});
 
 OptionsSelector.displayName = 'OptionsSelector';
 

src/components/PopoverMenu/BasePopoverMenu.js

@@ -0,0 +1,136 @@
+import _ from 'underscore';
+import React, {useRef, useEffect, useCallback} from 'react';
+import PropTypes from 'prop-types';
+import {View} from 'react-native';
+import PopoverWithMeasuredContent from '../PopoverWithMeasuredContent';
+import styles from '../../styles/styles';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
+import MenuItem from '../MenuItem';
+import {propTypes as createMenuPropTypes, defaultProps as createMenuDefaultProps} from './popoverMenuPropTypes';
+import refPropTypes from '../refPropTypes';
+import Text from '../Text';
+import CONST from '../../CONST';
+import useArrowKeyFocusManager from '../../hooks/useArrowKeyFocusManager';
+import useKeyboardShortcut from '../../hooks/useKeyboardShortcut';
+import useWindowDimensions from '../../hooks/useWindowDimensions';
+
+const propTypes = {
+    ...createMenuPropTypes,
+    ...windowDimensionsPropTypes,
+
+    /** The horizontal and vertical anchors points for the popover */
+    anchorPosition: PropTypes.shape({
+        horizontal: PropTypes.number.isRequired,
+        vertical: PropTypes.number.isRequired,
+    }).isRequired,
+
+    /** Ref of the anchor */
+    anchorRef: refPropTypes,
+
+    /** Where the popover should be positioned relative to the anchor points. */
+    anchorAlignment: PropTypes.shape({
+        horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)),
+        vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
+    }),
+
+    /** Indicates whether navigation should occur before closing the modal */
+    shouldNavigateBeforeClosingModal: PropTypes.bool,
+
+    withoutOverlay: PropTypes.bool,
+};
+
+const defaultProps = {
+    ...createMenuDefaultProps,
+    anchorAlignment: {
+        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
+        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+    },
+    shouldNavigateBeforeClosingModal: false,
+    anchorRef: () => {},
+    withoutOverlay: false,
+};
+
+function BasePopoverMenu(props) {
+    const {isSmallScreenWidth} = useWindowDimensions();
+    const selectedItemIndex = useRef(null);
+    const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({initialFocusedIndex: -1, maxIndex: props.menuItems.length - 1, isActive: props.isVisible});
+
+    const onModalHide = useCallback(() => {
+        if (selectedItemIndex.current == null) {
+            return;
+        }
+
+        setFocusedIndex(-1);
+        props.menuItems[selectedItemIndex.current].onSelected();
+        selectedItemIndex.current = null;
+    }, [props.menuItems, selectedItemIndex, setFocusedIndex]);
+
+    useEffect(() => {
+        if (!props.shouldNavigateBeforeClosingModal) {
+            return;
+        }
+        onModalHide();
+    }, [onModalHide, props.shouldNavigateBeforeClosingModal]);
+
+    const selectItem = (index) => {
+        const selectedItem = props.menuItems[index];
+        props.onItemSelected(selectedItem, index);
+        selectedItemIndex.current = index;
+    };
+
+    useKeyboardShortcut(
+        CONST.KEYBOARD_SHORTCUTS.ENTER,
+        () => {
+            if (focusedIndex === -1) {
+                return;
+            }
+            selectItem(focusedIndex);
+            setFocusedIndex(-1); // Reset the focusedIndex on selecting any menu
+        },
+        {isActive: props.isVisible},
+    );
+
+    return (
+        <PopoverWithMeasuredContent
+            anchorPosition={props.anchorPosition}
+            anchorRef={props.anchorRef}
+            anchorAlignment={props.anchorAlignment}
+            onClose={props.onClose}
+            onModalHide={() => {
+                if (props.shouldNavigateBeforeClosingModal) {
+                    return;
+                }
+                onModalHide();
+            }}
+            isVisible={props.isVisible}
+            animationIn={props.animationIn}
+            animationOut={props.animationOut}
+            animationInTiming={props.animationInTiming}
+            disableAnimation={props.disableAnimation}
+            fromSidebarMediumScreen={props.fromSidebarMediumScreen}
+            withoutOverlay={props.withoutOverlay}
+        >
+            <View style={isSmallScreenWidth ? {} : styles.createMenuContainer}>
+                {!_.isEmpty(props.headerText) && <Text style={[styles.createMenuHeaderText, styles.ml3]}>{props.headerText}</Text>}
+                {_.map(props.menuItems, (item, menuIndex) => (
+                    <MenuItem
+                        key={item.text}
+                        icon={item.icon}
+                        iconWidth={item.iconWidth}
+                        iconHeight={item.iconHeight}
+                        title={item.text}
+                        description={item.description}
+                        onPress={() => selectItem(menuIndex)}
+                        focused={focusedIndex === menuIndex}
+                    />
+                ))}
+            </View>
+        </PopoverWithMeasuredContent>
+    );
+}
+
+BasePopoverMenu.propTypes = propTypes;
+BasePopoverMenu.defaultProps = defaultProps;
+BasePopoverMenu.displayName = 'BasePopoverMenu';
+
+export default React.memo(withWindowDimensions(BasePopoverMenu));