Merge pull request Expensify#67191 from Krishna2323/krishna2323/issue/66723

Author: luacmartins

src/components/AmountPicker/index.tsx

@@ -2,6 +2,7 @@ import React, {forwardRef, useState} from 'react';
 import type {ForwardedRef} from 'react';
 import {View} from 'react-native';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import blurActiveElement from '@libs/Accessibility/blurActiveElement';
 import CONST from '@src/CONST';
 import callOrReturn from '@src/types/utils/callOrReturn';
 import AmountSelectorModal from './AmountSelectorModal';
@@ -16,6 +17,7 @@ function AmountPicker({value, description, title, errorText = '', onInputChange,
 
     const hidePickerModal = () => {
         setIsPickerVisible(false);
+        blurActiveElement();
     };
 
     const updateInput = (updatedValue: string) => {

src/components/Form/FormWrapper.tsx

@@ -84,6 +84,7 @@ function FormWrapper({
     scrollContextEnabled = false,
     shouldHideFixErrorsAlert = false,
     disablePressOnEnter = false,
+    enterKeyEventListenerPriority = 1,
     isSubmitDisabled = false,
     shouldRenderFooterAboveSubmit = false,
     isLoading = false,
@@ -179,14 +180,15 @@ function FormWrapper({
                     enabledWhenOffline={enabledWhenOffline}
                     isSubmitActionDangerous={isSubmitActionDangerous}
                     disablePressOnEnter={disablePressOnEnter}
-                    enterKeyEventListenerPriority={1}
+                    enterKeyEventListenerPriority={enterKeyEventListenerPriority}
                     shouldRenderFooterAboveSubmit={shouldRenderFooterAboveSubmit}
                     shouldBlendOpacity={shouldSubmitButtonBlendOpacity}
                     shouldPreventDefaultFocusOnPress={shouldPreventDefaultFocusOnPressSubmit}
                 />
             ),
         [
             disablePressOnEnter,
+            enterKeyEventListenerPriority,
             enabledWhenOffline,
             errorMessage,
             errors,

src/components/Form/types.ts

@@ -1,4 +1,4 @@
-import type {ComponentType, FocusEvent, Key, MutableRefObject, ReactNode, Ref} from 'react';
+import type {ComponentType, FocusEvent, Key, ReactNode, Ref, RefObject} from 'react';
 import type {GestureResponderEvent, NativeSyntheticEvent, StyleProp, TextInputFocusEventData, TextInputSubmitEditingEventData, ViewStyle} from 'react-native';
 import type {ValueOf} from 'type-fest';
 import type AddPlaidBankAccount from '@components/AddPlaidBankAccount';
@@ -166,6 +166,9 @@ type FormProps<TFormID extends OnyxFormKey = OnyxFormKey> = {
     /** Disable press on enter for submit button */
     disablePressOnEnter?: boolean;
 
+    /** The priority to assign the enter key event listener to buttons. 0 is the highest priority. */
+    enterKeyEventListenerPriority?: number;
+
     /** Render extra button above submit button */
     shouldRenderFooterAboveSubmit?: boolean;
     /**
@@ -182,7 +185,7 @@ type FormRef<TFormID extends OnyxFormKey = OnyxFormKey> = {
     submit: () => void;
 };
 
-type InputRefs = Record<string, MutableRefObject<InputComponentBaseProps>>;
+type InputRefs = Record<string, RefObject<InputComponentBaseProps>>;
 
 type FormInputErrors<TFormID extends OnyxFormKey = OnyxFormKey> = Partial<Record<FormOnyxKeys<TFormID>, string | undefined>>;
 

src/components/TextPicker/TextSelectorModal.tsx

@@ -142,6 +142,7 @@ function TextSelectorModal({
                     enabledWhenOffline
                     shouldHideFixErrorsAlert
                     addBottomSafeAreaPadding
+                    enterKeyEventListenerPriority={0}
                 >
                     <View style={styles.pb4}>{!!subtitle && <Text style={[styles.sidebarLinkText, styles.optionAlternateText]}>{subtitle}</Text>}</View>
                     <InputWrapper

src/pages/workspace/reportFields/CreateReportFieldsPage.tsx

@@ -102,8 +102,6 @@ function WorkspaceCreateReportFieldsPage({
         setInitialCreateReportFieldsForm();
     }, []);
 
-    const [modal] = useOnyx(ONYXKEYS.MODAL, {canBeMissing: true});
-
     const listValues = [...(formDraft?.[INPUT_IDS.LIST_VALUES] ?? [])].sort(localeCompare).join(', ');
 
     return (
@@ -132,7 +130,6 @@ function WorkspaceCreateReportFieldsPage({
                     submitButtonText={translate('common.save')}
                     enabledWhenOffline
                     shouldValidateOnBlur={false}
-                    disablePressOnEnter={!!modal?.isVisible}
                     addBottomSafeAreaPadding
                 >
                     {({inputValues}) => (

src/pages/workspace/reportFields/InitialListValueSelector/index.tsx

@@ -4,6 +4,7 @@ import {View} from 'react-native';
 import type {MenuItemBaseProps} from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import useOnyx from '@hooks/useOnyx';
+import blurActiveElement from '@libs/Accessibility/blurActiveElement';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import InitialListValueSelectorModal from './InitialListValueSelectorModal';
@@ -20,7 +21,7 @@ type InitialListValueSelectorProps = Pick<MenuItemBaseProps, 'label' | 'rightLab
 };
 
 function InitialListValueSelector({value = '', label = '', rightLabel, subtitle = '', errorText = '', onInputChange}: InitialListValueSelectorProps, forwardedRef: ForwardedRef<View>) {
-    const [formDraft] = useOnyx(ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM_DRAFT);
+    const [formDraft] = useOnyx(ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM_DRAFT, {canBeMissing: true});
 
     const [isPickerVisible, setIsPickerVisible] = useState(false);
 
@@ -30,6 +31,7 @@ function InitialListValueSelector({value = '', label = '', rightLabel, subtitle
 
     const hidePickerModal = () => {
         setIsPickerVisible(false);
+        blurActiveElement();
     };
 
     const updateValueInput = (initialValue: string) => {

src/pages/workspace/reportFields/TypeSelector/index.tsx

@@ -5,7 +5,8 @@ import {View} from 'react-native';
 import type {MenuItemBaseProps} from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import useLocalize from '@hooks/useLocalize';
-import * as WorkspaceReportFieldUtils from '@libs/WorkspaceReportFieldUtils';
+import blurActiveElement from '@libs/Accessibility/blurActiveElement';
+import {getReportFieldTypeTranslationKey} from '@libs/WorkspaceReportFieldUtils';
 import type {ReportFieldItemType} from '@pages/workspace/reportFields/ReportFieldTypePicker';
 import CONST from '@src/CONST';
 import type {PolicyReportFieldType} from '@src/types/onyx/Policy';
@@ -36,6 +37,7 @@ function TypeSelector({value, label = '', rightLabel, subtitle = '', errorText =
 
     const hidePickerModal = () => {
         setIsPickerVisible(false);
+        blurActiveElement();
     };
 
     const updateTypeInput = (reportField: ReportFieldItemType) => {
@@ -49,7 +51,7 @@ function TypeSelector({value, label = '', rightLabel, subtitle = '', errorText =
             <MenuItemWithTopDescription
                 ref={forwardedRef}
                 shouldShowRightIcon
-                title={value ? Str.recapitalize(translate(WorkspaceReportFieldUtils.getReportFieldTypeTranslationKey(value as PolicyReportFieldType))) : ''}
+                title={value ? Str.recapitalize(translate(getReportFieldTypeTranslationKey(value as PolicyReportFieldType))) : ''}
                 description={label}
                 rightLabel={rightLabel}
                 brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}

src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx

@@ -10,7 +10,6 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextPicker from '@components/TextPicker';
 import useLocalize from '@hooks/useLocalize';
-import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {createPolicyTax, getNextTaxCode, getTaxValueWithPercentage, validateTaxName, validateTaxValue} from '@libs/actions/TaxRate';
 import Navigation from '@libs/Navigation/Navigation';
@@ -37,7 +36,6 @@ function WorkspaceCreateTaxPage({
 }: WorkspaceCreateTaxPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const [modal] = useOnyx(ONYXKEYS.MODAL, {canBeMissing: true});
 
     const submitForm = useCallback(
         ({value, ...values}: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_NEW_TAX_FORM>) => {
@@ -90,7 +88,6 @@ function WorkspaceCreateTaxPage({
                             submitButtonText={translate('common.save')}
                             enabledWhenOffline
                             shouldValidateOnBlur={false}
-                            disablePressOnEnter={!!modal?.isVisible}
                             addBottomSafeAreaPadding
                         >
                             <View style={styles.mhn5}>