From d9b97ce7cdb25fa91a4beee06c07c8bedf4087ae Mon Sep 17 00:00:00 2001 From: VH Date: Wed, 2 Aug 2023 06:15:52 +0700 Subject: [PATCH 1/3] Only focus if form re visible again --- src/pages/signin/LoginForm.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/pages/signin/LoginForm.js b/src/pages/signin/LoginForm.js index a6b84e983ede..5169c87938fd 100644 --- a/src/pages/signin/LoginForm.js +++ b/src/pages/signin/LoginForm.js @@ -28,6 +28,7 @@ import isInputAutoFilled from '../../libs/isInputAutoFilled'; import * as PolicyUtils from '../../libs/PolicyUtils'; import Log from '../../libs/Log'; import withNavigationFocus, {withNavigationFocusPropTypes} from '../../components/withNavigationFocus'; +import usePrevious from '../../hooks/usePrevious'; const propTypes = { /** Should we dismiss the keyboard when transitioning away from the page? */ @@ -81,6 +82,7 @@ function LoginForm(props) { const input = useRef(); const [login, setLogin] = useState(''); const [formError, setFormError] = useState(false); + const prevIsVisible = usePrevious(props.isVisible); const {translate} = props; @@ -166,11 +168,13 @@ function LoginForm(props) { if (props.blurOnSubmit) { input.current.blur(); } - if (!input.current || !props.isVisible) { + + // Only focus if the form is re-visible again to prevent the keyboard is shown in touchscreen devices after sign out + if (!input.current || prevIsVisible || !props.isVisible) { return; } input.current.focus(); - }, [props.blurOnSubmit, props.isVisible, input]); + }, [props.blurOnSubmit, props.isVisible, prevIsVisible]); const formErrorText = useMemo(() => (formError ? translate(formError) : ''), [formError, translate]); const serverErrorText = useMemo(() => ErrorUtils.getLatestErrorMessage(props.account), [props.account]); From 73c1e7e7a886590462cf80effe11ea0d1bfd9458 Mon Sep 17 00:00:00 2001 From: VH Date: Wed, 2 Aug 2023 06:42:24 +0700 Subject: [PATCH 2/3] set value default value to prevent it's alway undefined initially --- src/hooks/usePrevious.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/usePrevious.js b/src/hooks/usePrevious.js index 0e03608da7d4..b1f8ff82ea2d 100644 --- a/src/hooks/usePrevious.js +++ b/src/hooks/usePrevious.js @@ -7,7 +7,7 @@ import {useEffect, useRef} from 'react'; * @returns {*} */ export default function usePrevious(value) { - const ref = useRef(); + const ref = useRef(value); useEffect(() => { ref.current = value; }, [value]); From 283cb9d53b25565b3e6152f3154cd8c3d1d1da79 Mon Sep 17 00:00:00 2001 From: Vinh Hoang Date: Fri, 4 Aug 2023 15:20:31 +0700 Subject: [PATCH 3/3] Update comment Co-authored-by: Sahil --- src/pages/signin/LoginForm.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/signin/LoginForm.js b/src/pages/signin/LoginForm.js index 5169c87938fd..0e8a787d92c6 100644 --- a/src/pages/signin/LoginForm.js +++ b/src/pages/signin/LoginForm.js @@ -169,7 +169,7 @@ function LoginForm(props) { input.current.blur(); } - // Only focus if the form is re-visible again to prevent the keyboard is shown in touchscreen devices after sign out + // Only focus the input if the form becomes visible again, to prevent the keyboard from automatically opening on touchscreen devices after signing out if (!input.current || prevIsVisible || !props.isVisible) { return; }