š Final Form Focus š§
Decorator for š Final Form that will attempt to apply focus to the first field with an error upon an attempted form submission.
Installation
npmĀ installĀ --saveĀ final-formĀ final-form-focus
or
yarnĀ addĀ final-formĀ final-form-focus
Usage
š Final Form Usage
Ā //Ā CreateĀ FormconstĀ formĀ =Ā Ā //Ā CreateĀ DecoratorconstĀ decoratorĀ =Ā Ā //Ā DecorateĀ formconstĀ undecorateĀ =Ā Ā //Ā UseĀ formĀ asĀ normal
š React Final Form Usage
Ā constĀ focusOnErrorsĀ =Ā ...<FormĀ Ā onSubmit=submitĀ Ā decorators=Ā focusOnErrorsĀ Ā //Ā <---------Ā šĀ Ā validate=validateĀ Ā render=Ā Ā Ā Ā <formĀ onSubmit=handleSubmit>Ā Ā Ā Ā Ā Ā Ā ...Ā inputsĀ hereĀ ...Ā Ā Ā Ā Ā </form>Ā Ā />
Example
Focus On Error Example
Demonstrates how š Final Form Focus š§ works with š React Final Form.
API
createDecorator: (getInputs?: GetInputs, findInput?: FindInput) => Decorator
A function that takes an optional function to collect a list of focusable inputs on the page and provides a š Final Form Decorator
that will focus on the top-most input on the page with an error when a form submission fails. If no getInputs
parameter is provided, it will use a generic one that will return all inputs that appear in document.forms
. If no findInput
parameter is provided, it will use a generic one that matches the name attribute of the focusable input with the path in the error object.
getFormInputs: (formName: string) => GetInputs
A GetInputs
generator that will narrow the list of inputs down to those contained in the named form, i.e. document.forms[formName]
.
Types
FocusableInput: { name: string, focus: () => void }
A light abstraction of any input that has a name
property and upon which focus()
may be called.
GetInputs: () => FocusableInput[]
A function that collects a list of focusable inputs that exist on the page.
FindInput: (FocusableInput[], {}) => ?FocusableInput
A function that returns the first element in a list of focusable inputs that has an error