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?

[acontreras89]

I think the updated reference is https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1071:

// Don't let invalid forms submit
if (!this.state.canSubmit) return

[acontreras89]

I've found myself validating all fields manually prior to calling form.handleSubmit():

const handleSubmit = async (ev: FormEvent<HTMLFormElement>) => {
  ev.preventDefault()

  const errors = await form.validate('submit')
  // traverse errors however you need
  for (const step of Steps) {
    if (errors[step]) {
      handleGoToStep(step)
      return
    }
  }

  // this will validate the form again, but whatever..
  form.handleSubmit()
}

Although this is far from optimal, specially for people using async validation.

[codepunkt]

Moved back to react-hook-form because of this for the time being.
Will stay subscribed to see if this is officially addressed.

[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?

[Balastrong]

I don't think there's a recommended approach yet but proposals and pull requests exploring the feature are always welcome :)

[harry-whorlow]

@beeirl I have an idea, @parkm suggestion with my pr #1125, could make this work.... I'll let you know when it get merged.

[beeirl]

@harry-whorlow great! lmk if i can help in any way

[stefanprobst]

another usecase for focus-management: when adding a new entry to an array field with pushValue focus should also move to the first added input

[thobas-dnvgl]

With the most recent version of TanStack Form, this is how I solved it:

• Add canSubmitWhenInvalid: true to useForm()
• Add data-error="true" to all the field error messages (will revisit to use aria-invali"true" on the invalid field instead, but you get the idea)
• Add onSubmitInvalid: () => { window.document.querySelector('[data-error="true"]')?.scrollIntoView(); }, to useForm()

[adriantilvar]

The use-case that landed me here is a combo input, for which I wanted to unfocus (blur) the input on selection. I think it would be cool to have an API to do that.

[crutchcorn]

Apologies y'all; I genuinely thought there was an A11Y issue with implementing this pattern. I was corrected today and as-such have documented how you can do so in your own projects:

https://tanstack.com/form/latest/docs/framework/react/guides/focus-management

FWIW we've been able to do this for ages but have not documented its capabilities due to my misunderstanding of the A11Y concerns.

[samburgers]

@crutchcorn thanks so much for these! the first example only seems to work on the first validation. onSubmitInvalid doesnt appear to fire at all on follow up submissions.

[LeCarbonator]

@samburgers probably related to #1696