Feature suggestion: Focus on first errored field

[itsUndefined]

This would improve the accessibility of the form

[parkm]

+1 it's also useful when you have a form that is scrollable, as focusing the element will scroll that element into view. This is something that react-hook-form does, but it only works with input elements.

One idea could be to pass a ref to some metadata of the field and then be able to access that metadata after validation occurs. Then I could add my own focus/scroll implementation:

 const fieldsWithErrors = await form.validateAllFields("submit"); //Current implementation returns an array of strings
 if (fieldsWithErrors[0]) {
   fieldsWithErrors[0].meta.someRefIPassedIntoFormDotField?.current?.focus()
 }

[Balastrong]

If you're going to handle focus/scroll with custom code you can do that on the onSubmitInvalid callback since you can access formApi.state from there and get access to the errored fields.

If you can make a demo out of that on stackblitz that would be great!

[parkm]

Hi @Balastrong I forked the Simple Example here https://stackblitz.com/edit/tanstack-form-qxemu3?file=src%2Findex.tsx but it looks like the state isn't updated when I log it in the onSubmitInvalid callback. I'm seeing an empty array for errors when I submit without inputting any values.

Also what would be the best way to access the field's elements in order to call focus()? I guess we could just call document.querySelector and make sure there's ids on each field that match the field name (although that might get weird with field arrays), but I think it would be cool to be able to leverage refs when rendering with <form.Field> (at least in React, not sure how it'd work in other frameworks)

[Balastrong]

formApi.state.fieldMeta should be the right place where to find field errors.
I also noticed that after a failed submit, onSubmitInvalid is not called anymore as long as the form remains invalid. I don't think this should be the default behaviour anyway.

Speaking of focusing an element, if we want the lib to make it we either get to the DOM manually from form-core or we implement the logic on each framework-specific wrapper. If it's done with user code then it's up to you. Let's think about it.

[parkm]

Ah there it is! Yeah I agree I would expect onSubmitInvalid to always get called if invalid, so that we could always run our focusing code.

If we could set our own metadata via the FieldApi then that'd solve my use case as I could run something like field.setMeta({ customMeta: {inputRef: ref }}) in the ref callback, and then get that in formApi.state.fieldMeta. I feel like it'd be a useful thing to have user defined metadata in general though, so that you could keep track of certain states the field is in for more complicated components.

[beeirl]

hey @parkm did you end up finding a solution?

[codepunkt]

Does anyone have news about this?
Focusing the first field with an error is a must-have for my rather simple use-cases.
Implementing it onSubmitInvalid sounds nice, but that seems to only trigger once.

I would gladly provide a PR that changes this, but I don't understand the reasoning yet. Can we always trigger that, regardless of any changes being applied between two submit attempts?

[codepunkt]

This cancels subsequent onSubmitInvalid invocations:
https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L961-L962

@tannerlinsley @crutchcorn wdyt?
are there alternatives other than using onSubmitInvalid to focus invalid fields on submit?

[beeirl]

@Balastrong @crutchcorn would be really cool if we could get an update on this. what's the recommended approach or is it straight up not feasible right now?