From d023cf52b5fa1d4b9a4afedbf95f82ee53f4dd08 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 19 Jun 2024 18:44:07 +0800 Subject: [PATCH 1/4] remove autoFocus prop --- src/pages/signin/LoginForm/BaseLoginForm.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/signin/LoginForm/BaseLoginForm.tsx b/src/pages/signin/LoginForm/BaseLoginForm.tsx index 1c8084eb12e2..49e7479c0435 100644 --- a/src/pages/signin/LoginForm/BaseLoginForm.tsx +++ b/src/pages/signin/LoginForm/BaseLoginForm.tsx @@ -267,7 +267,6 @@ function BaseLoginForm({account, credentials, closeAccount, blurOnSubmit = false onSubmitEditing={validateAndSubmitForm} autoCapitalize="none" autoCorrect={false} - autoFocus inputMode={CONST.INPUT_MODE.EMAIL} errorText={formError} hasError={shouldShowServerError} From aea756f9a9c3de08fca8b91268fe6755eb179554 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 19 Jun 2024 18:44:21 +0800 Subject: [PATCH 2/4] don't set initial focus for sign in modal --- src/components/FocusTrap/SCREENS_WITH_AUTOFOCUS.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/FocusTrap/SCREENS_WITH_AUTOFOCUS.ts b/src/components/FocusTrap/SCREENS_WITH_AUTOFOCUS.ts index 2a77b52e3116..ec2977ea592c 100644 --- a/src/components/FocusTrap/SCREENS_WITH_AUTOFOCUS.ts +++ b/src/components/FocusTrap/SCREENS_WITH_AUTOFOCUS.ts @@ -10,6 +10,7 @@ const SCREENS_WITH_AUTOFOCUS: string[] = [ SCREENS.SETTINGS.PROFILE.PRONOUNS, SCREENS.NEW_TASK.DETAILS, SCREENS.MONEY_REQUEST.CREATE, + SCREENS.SIGN_IN_ROOT, ]; export default SCREENS_WITH_AUTOFOCUS; From 8099d789bba5efe7b2533d92ac63c2240eebf7ed Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 20 Jun 2024 14:43:02 +0800 Subject: [PATCH 3/4] don't set initial focus for sign in page --- .../FocusTrap/FocusTrapForScreen/index.web.tsx | 10 +++++++--- src/components/FocusTrap/SCREENS_WITH_AUTOFOCUS.ts | 10 +++++++++- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/components/FocusTrap/FocusTrapForScreen/index.web.tsx b/src/components/FocusTrap/FocusTrapForScreen/index.web.tsx index 6a1409ab4a93..5e41e64b3115 100644 --- a/src/components/FocusTrap/FocusTrapForScreen/index.web.tsx +++ b/src/components/FocusTrap/FocusTrapForScreen/index.web.tsx @@ -1,12 +1,14 @@ import {useFocusEffect, useIsFocused, useRoute} from '@react-navigation/native'; import FocusTrap from 'focus-trap-react'; import React, {useCallback, useMemo} from 'react'; +import {useOnyx} from 'react-native-onyx'; import BOTTOM_TAB_SCREENS from '@components/FocusTrap/BOTTOM_TAB_SCREENS'; -import SCREENS_WITH_AUTOFOCUS from '@components/FocusTrap/SCREENS_WITH_AUTOFOCUS'; +import getScreenWithAutofocus from '@components/FocusTrap/SCREENS_WITH_AUTOFOCUS'; import sharedTrapStack from '@components/FocusTrap/sharedTrapStack'; import TOP_TAB_SCREENS from '@components/FocusTrap/TOP_TAB_SCREENS'; import WIDE_LAYOUT_INACTIVE_SCREENS from '@components/FocusTrap/WIDE_LAYOUT_INACTIVE_SCREENS'; import useWindowDimensions from '@hooks/useWindowDimensions'; +import ONYXKEYS from '@src/ONYXKEYS'; import type FocusTrapProps from './FocusTrapProps'; let activeRouteName = ''; @@ -14,6 +16,8 @@ function FocusTrapForScreen({children}: FocusTrapProps) { const isFocused = useIsFocused(); const route = useRoute(); const {isSmallScreenWidth} = useWindowDimensions(); + const [isAuthenticated] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => !!session?.authToken}); + const screensWithAutofocus = useMemo(() => getScreenWithAutofocus(isAuthenticated), [isAuthenticated]); const isActive = useMemo(() => { // Focus trap can't be active on bottom tab screens because it would block access to the tab bar. @@ -49,13 +53,13 @@ function FocusTrapForScreen({children}: FocusTrapProps) { fallbackFocus: document.body, // We don't want to ovverride autofocus on these screens. initialFocus: () => { - if (SCREENS_WITH_AUTOFOCUS.includes(activeRouteName)) { + if (screensWithAutofocus.includes(activeRouteName)) { return false; } return undefined; }, setReturnFocus: (element) => { - if (SCREENS_WITH_AUTOFOCUS.includes(activeRouteName)) { + if (screensWithAutofocus.includes(activeRouteName)) { return false; } return element; diff --git a/src/components/FocusTrap/SCREENS_WITH_AUTOFOCUS.ts b/src/components/FocusTrap/SCREENS_WITH_AUTOFOCUS.ts index ec2977ea592c..7af327d35ac4 100644 --- a/src/components/FocusTrap/SCREENS_WITH_AUTOFOCUS.ts +++ b/src/components/FocusTrap/SCREENS_WITH_AUTOFOCUS.ts @@ -1,4 +1,5 @@ import {CENTRAL_PANE_WORKSPACE_SCREENS} from '@libs/Navigation/AppNavigator/Navigators/FullScreenNavigator'; +import NAVIGATORS from '@src/NAVIGATORS'; import SCREENS from '@src/SCREENS'; const SCREENS_WITH_AUTOFOCUS: string[] = [ @@ -13,4 +14,11 @@ const SCREENS_WITH_AUTOFOCUS: string[] = [ SCREENS.SIGN_IN_ROOT, ]; -export default SCREENS_WITH_AUTOFOCUS; +function getScreenWithAutofocus(isAuthenticated: boolean) { + if (!isAuthenticated) { + return [...SCREENS_WITH_AUTOFOCUS, NAVIGATORS.BOTTOM_TAB_NAVIGATOR]; + } + return SCREENS_WITH_AUTOFOCUS; +} + +export default getScreenWithAutofocus; From 4fbace1f1289fae8f93103ed9831b42c612b7f97 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 27 Jun 2024 00:18:45 +0800 Subject: [PATCH 4/4] fix typing --- src/components/FocusTrap/FocusTrapForScreen/index.web.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FocusTrap/FocusTrapForScreen/index.web.tsx b/src/components/FocusTrap/FocusTrapForScreen/index.web.tsx index 5e41e64b3115..d81293729b94 100644 --- a/src/components/FocusTrap/FocusTrapForScreen/index.web.tsx +++ b/src/components/FocusTrap/FocusTrapForScreen/index.web.tsx @@ -17,7 +17,7 @@ function FocusTrapForScreen({children}: FocusTrapProps) { const route = useRoute(); const {isSmallScreenWidth} = useWindowDimensions(); const [isAuthenticated] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => !!session?.authToken}); - const screensWithAutofocus = useMemo(() => getScreenWithAutofocus(isAuthenticated), [isAuthenticated]); + const screensWithAutofocus = useMemo(() => getScreenWithAutofocus(!!isAuthenticated), [isAuthenticated]); const isActive = useMemo(() => { // Focus trap can't be active on bottom tab screens because it would block access to the tab bar.