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]); diff --git a/src/pages/signin/LoginForm.js b/src/pages/signin/LoginForm.js index a6b84e983ede..0e8a787d92c6 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 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; } 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]);