Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
final-form-focus
Advanced tools
Readme
Decorator for ๐ Final Form that will attempt to apply focus to the first field with an error upon an attempted form submission.
npm install --save final-form final-form-focus
or
yarn add final-form final-form-focus
import { createForm } from 'final-form'
import createDecorator from 'final-form-focus'
// Create Form
const form = createForm({ onSubmit })
// Create Decorator
const decorator = createDecorator()
// Decorate form
const undecorate = decorator(form)
// Use form as normal
import React from 'react'
import { Form, Field } from 'react-final-form'
import createDecorator from 'final-form-focus'
const focusOnErrors = createDecorator()
...
<Form
onSubmit={submit}
decorators={[ focusOnErrors ]} // <--------- ๐
validate={validate}
render={({ handleSubmit }) =>
<form onSubmit={handleSubmit}>
... inputs here ...
</form>
}
/>
Demonstrates how ๐ Final Form Focus ๐ง works with ๐ React Final Form.
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]
.
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
FAQs
Decorator that will attempt to apply focus to the first field with an error upon an attempted form submission in ๐ Final Form
The npm package final-form-focus receives a total of 47,855 weekly downloads. As such, final-form-focus popularity was classified as popular.
We found that final-form-focus demonstrated a not healthy version release cadence and project activity because the last version was released a year ago.ย It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.