diff --git a/contributingGuides/FORMS.md b/contributingGuides/FORMS.md index 01f145dafbc6..661c700130c7 100644 --- a/contributingGuides/FORMS.md +++ b/contributingGuides/FORMS.md @@ -274,6 +274,7 @@ Form.js will automatically provide the following props to any input with the inp - onBlur: An onBlur handler that calls validate. - onTouched: An onTouched handler that marks the input as touched. - onInputChange: An onChange handler that saves draft values and calls validate for that input (inputA). Passing an inputID as a second param allows inputA to manipulate the input value of the provided inputID (inputB). +- onFocus: An onFocus handler that marks the input as focused. ## Dynamic Form Inputs diff --git a/src/components/Form.js b/src/components/Form.js index eb6945f6ec78..a45c6d769d57 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -108,6 +108,7 @@ function Form(props) { const formContentRef = useRef(null); const inputRefs = useRef({}); const touchedInputs = useRef({}); + const focusedInput = useRef(null); const isFirstRender = useRef(true); const {validate, onSubmit, children} = props; @@ -305,6 +306,12 @@ function Form(props) { // as this is already happening by the value prop. defaultValue: undefined, errorText: errors[inputID] || fieldErrorMessage, + onFocus: (event) => { + focusedInput.current = inputID; + if (_.isFunction(child.props.onFocus)) { + child.props.onFocus(event); + } + }, onBlur: (event) => { // Only run validation when user proactively blurs the input. if (Visibility.isVisible() && Visibility.hasFocus()) { @@ -328,6 +335,11 @@ function Form(props) { }, onInputChange: (value, key) => { const inputKey = key || inputID; + + if (focusedInput.current && focusedInput.current !== inputKey) { + setTouchedInput(focusedInput.current); + } + setInputValues((prevState) => { const newState = { ...prevState,