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;
	}
	}
	}

[lensbart]

@edmundhung I tried using the StackBlitz link you provided, but it runs into an error on npm run dev. In any case, I think the focus behaviour I’m running into is due to the element.focus() line above

[edmundhung]

The code you’re referring to will only run during an actual form submission. There’s likely something else triggering a form submission that you might not be aware of.

Not sure why the StackBlitz link isn’t working for you. If you’re not using Chrome, could you try accessing it there?

[lensbart]

Thanks, this is helpful.

The code you’re referring to will only run during an actual form submission. There’s likely something else triggering a form submission that you might not be aware of.

This seems to be the crux of the issue: the inputs in my app are autosaving; they are submitted on input (debounced), and on blur. Even if I disable the onBlur event handler, focus will jump back to the invalid input when the debounced onInput autosave gets executed.

I’m not sure if this is a common pattern, but it would be helpful if the autofocus behaviour could be opt-in/opt-out, via some configuration property. Are you open to a quick PR that adds a boolean focusOnError to the form options?

Not sure why the StackBlitz link isn’t working for you. If you’re not using Chrome, could you try accessing it there?

I was using Safari, it works fine in Chrome. If the above explanation is not sufficient, I will look into making a reproduction.

Thanks in advance!