diff --git a/src/components/TimePicker/TimePicker.js b/src/components/TimePicker/TimePicker.js index a9b4566a390c..4664251ca765 100644 --- a/src/components/TimePicker/TimePicker.js +++ b/src/components/TimePicker/TimePicker.js @@ -8,6 +8,7 @@ import Button from '@components/Button'; import FormHelpMessage from '@components/FormHelpMessage'; import refPropTypes from '@components/refPropTypes'; import Text from '@components/Text'; +import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; @@ -127,6 +128,8 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) { const hourInputRef = useRef(null); const minuteInputRef = useRef(null); + const {inputCallbackRef} = useAutoFocusInput(); + const focusMinuteInputOnFirstCharacter = useCallback(() => setCursorPosition(0, minuteInputRef, setSelectionMinute), []); const focusHourInputOnLastCharacter = useCallback(() => setCursorPosition(2, hourInputRef, setSelectionHour), []); @@ -492,6 +495,7 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) { minuteInputRef.current = {hourRef: hourInputRef.current, minuteInputRef: ref}; } minuteInputRef.current = ref; + inputCallbackRef(ref); }} onSelectionChange={(e) => { setSelectionMinute(e.nativeEvent.selection);