[Form] Input focus shift for onClearErrors with multiple Fields

[Eelkedejong]

Bug report

Current behavior

Live example

This is a copy of the Base UI form documentation example, but then with 2 form fields.

Steps:

1. Create a Form with multiple Fields.
2. In the onSubmit of the form, set the errors object with an error for both Fields.
3. Both Fields show the error correctly, the first Field is focussed.
4. When changing the first input, the error for this field is immediatly cleared (which makes sense, the user is working on fixing the error), except where it goes wrong is that the moment a single change is made, the focus immediatly switches to the second Field that has an error, instead of letter the using fix the input content.

Expected behavior

In step 4, I would expect the focus to remain in the first field. I cannot change more than 1 character before my focus automatically goes to the next field that has an error.

Reproducible example

Codesandbox example: https://codesandbox.io/p/sandbox/busy-sound-9mspmd

Base UI version

For example v1.0.2

Which browser are you using?

Chrome

Which OS are you using?

Mac OS/Windows

[atomiks]

Thanks for reporting @Eelkedejong. onClearErrors gets called immediately onChange of one of the form/field controls, which causes the focus effect to fire whenever the errors prop changes. This should likely be moved to the onSubmit event instead so it runs only once on each submit event