-
Notifications
You must be signed in to change notification settings - Fork 41
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
On submit validation failure, focus on first invalid input #243
Comments
You can create a hook that stores an array of tuple (or map) of // FormWrapper.res
module Make = (Config: ReForm.Config) => {
include ReForm.Make(Config)
module ComparableField = Belt.Id.MakeComparable({
type t = field
let cmp = Pervasives.compare
})
type fields = Belt.MutableMap.t<ComparableField.t, Dom.element, ComparableField.identity>
type registerFieldFn = (field, Js.Nullable.t<Dom.element>) => unit
let useScrollToField = (~offsetTop=0, ()) => {
let fieldsRef: React.ref<fields> = React.useRef(
Belt.MutableMap.make(~id=module(ComparableField)),
)
let register = (fieldName, fieldRef) => {
switch fieldRef->Js.Nullable.toOption {
| Some(el) => fieldsRef.current->Belt.MutableMap.set(fieldName, el)
| None => ()
}
}
let scrollToFieldWithError = ({state}: onSubmitAPI) => {
state.fieldsState
->Belt.Array.get(0)
->Belt.Option.map(((field, _)) => field)
->Belt.Option.flatMap(field => fieldsRef.current->Belt.MutableMap.get(field))
->Belt.Option.map(el => DomApiExtra.Window.scrollTo(0, el->DomApiExtra.offsetTop - offsetTop))
->ignore
}
(register, scrollToFieldWithError)
}
}
// MyApp.res
module Lenses = %lenses(
type state = {
name: string,
}
)
module MyForm = FormWrapper.Make(Lenses)
@react.component
let make = () => {
// reform stuff here (useForm, etc)
let (registerField, scrollWhenFail) = MyForm.useScrollToField()
<input ref={Field(Name)->registerField->ReactDOM.Ref.callbackDomRef} />
} |
Thanks I'll give your example a shot. |
Let me know if you need help to change the example from scrolling to a focusing behaviour. |
Any progress here? Can I close this issue? |
Had some friction getting things wired up but finally got it:
Thanks! |
On submit validation failure, is there any feature that would help to focus on the first invalid input element?
The text was updated successfully, but these errors were encountered: