Focus-on-error can cause unexpected behavior in combination with onBlur validation

[lensbart]

Describe the bug and the expected behavior

I’m dealing with a form with input validation on blur. Some fields are mandatory and initially empty, so that if you blur by focusing another mandatory and empty field, you will get stuck in a perpetual focus/blur loop:

Screen.Recording.2024-10-11.at.01.54.58.mov

Apart from this, I feel like it’s more user-friendly to not programmatically change the focus on blur, since it is unexpected and counters the user action:

Screen.Recording.2024-10-11.at.01.58.03.mov

Suggested solutions:

• Don’t focus-on-error when the validation happens onBlur
• Add a boolean option to disable the focus-on-error behavior altogether

Are you open to a quick PR that adds a boolean focusOnError to the form options?

Thanks.

Conform version

v1.2.2

Steps to Reproduce the Bug or Issue

See screen recording above. Have two <input type="text" />s that are validated on blur, validation schema should be z.string() for both (which Conform interprets as disallowing ""), initial value should be "", blur one input by focusing the other input.

What browsers are you seeing the problem on?

Chrome, Firefox, Microsoft Edge, Safari, Others

Screenshots or Videos

See above

Additional context

Previously commented on this discussion, but I figured I could open an issue since this is probably unexpected behavior.

[edmundhung]

I might have misunderstood something. But I don't think we are changing the focus on validation.

Any chance you can provide a repo? You can use our example here:

https://stackblitz.com/github/edmundhung/conform/tree/main/examples/remix

[lensbart]

I don’t have a reproduction right now, but I think these are the offending lines:

conform/packages/conform-dom/form.ts

Lines 954 to 961 in cb98494

	if (formElement && result.status === 'error') {
	for (const element of formElement.elements) {
	if (isFieldElement(element) && meta.error[element.name]) {
	element.focus();
	break;
	}
	}
	}