Tabbing order resets after getting error message

[ragnsan]

Hello! I was wondering if anyone could help me out.

Tabbing through my form when it initially opens perfectly. But if I try to submit the form to get an error message, fill in the missing field, and then tab, it does not tab into the next input field. Instead, it unfocuses. When I tab once more, it selects the first element in the form modal, an "x"-button. If I keep tabbing, I can get back to the input I corrected and continue filling out the form. Whenever I get to another form field that threw a required error, the same thing happens. It resets the tab order and you have to start over. Here is a sample input field from the form:

<div className="flex flex-col flex-1 "> <label htmlFor="product" className={${
!errors.name
? "text-primary_700 focus-within:border-primary_700 focus-within:border-2"
: "text-danger_700 border-danger_700"
} flex flex-col text-body_small font-semibold text-primary_700 border border-1 border-neutral_100 p-8 rounded-4} > <div className="flex items-center mb-4"> <span className="mr-8">{person}</span> Hva er ditt navn? (Vil ikke blir vist) </div> <input name="name" {...register("name", { required: "Skriv hvilket produkt det handler om" })} className="text-body_regular font-medium outline-none text-neutral_300 focus:text-neutral_700" /> </label> </div> <div className="h-18 mb-16"> {errors.name && ( <span className="flex px-8 rounded-4 text-body_small text-danger_700 font-semibold bg-danger_50"> {errors.name.message} </span> )} </div>

Any help would be greatly appreciated! Best regards,
Ragnsan

[ragnsan]

That code snippet did not look too great. Here is a screenshot of the same code

[ragnsan]

And here is an example of the tabbing focus going back to the x-button after throwing errors in the form

[ragnsan]

bump

[bluebill1049]

react hook form has no control over tab order.

[ragnsan]

Maybe tab over is the wrong word to use. If I have no errors, I can through the entire form. If I have errors, whenever I tab to the next form, it goes back to the starting point, if that makes sense?

[bluebill1049]

if you mean focus, you can turn it off: https://react-hook-form.com/api/useform

[skaidigitalnorge]

No, that's not what I meant. I made a video to showcase what I mean.
Case 1: Tabbing through empty input boxes, no problem
Case 2: Tabbing through input boxes with errors after submitting, no problem
Case 3: Filling out and trying to tab through input boxes with errors causes the tabbing to restart at the first available point

https://www.loom.com/share/663aa1e9999a485d9176287b05c2acc9

[ragnsan]

bump

[bluebill1049]

This issue is not related to hook form, we don't affect the tabbing order.

[DevDaveJ]

@bluebill1049 But rhf most definitely affects focus, which ends up affecting the ability to tab / tab order. I'm experiencing the same issue as @ragnsan.

Maybe setFocus from useForm can help, if you specify the next input/field. Im trying to use it after using trigger to do manual validation on one field in the form

[DevDaveJ]

@bluebill1049 But rhf most definitely affects focus, which ends up affecting the ability to tab / tab order. I'm experiencing the same issue as @ragnsan.

Maybe setFocus .from useForm can help, if you specify the next input/field. Im trying to use it after using trigger to do manual validation on one field in the form

[Auskennfuchs]

Has anybody found a solution for this problem? This still occurs on version 7.62.0 when using mode:'onBlur'. With onChange everything works like intended. And this problem only happens if something is removed in the DOM of the form, e.g. removing the error message below an input field. Showing the error message because of a validation error doesn't affect the tab order and the next field is correctly focused.