Native form validation does not open <details>

[stephenrwicks]

Native form validation will block form submission if there are invalid inputs inside <details> (e.g., blank "required" textbox).

But this will not automatically open <details> and display a validation message. Chrome, Edge, and Firefox all log an error to the console (input is not focusable) and display the next validation error if there is one.

It seems to me the <details> should automatically open, display a validation error, and focus the input. Clicking an anchor tag pointing to the input's ID inside the <details> opens it and focuses the input. Ctrl + F can even open the <details> element automatically.

Basic example: https://codepen.io/stephenrwicks/pen/ZYOdLxb

[lukewarlow]

Cc @dbaron does this seem like something doable? It feels like something that should open the details automatically.

[dbaron]

cc @josepharhar too. Maybe this should work with anything with hidden=until-found ?

[josepharhar]

Chrome, Edge, and Firefox all log an error to the console (input is not focusable)

Should attempting to focus an element or scroll it into view via any method besides the keyboard reveal all ancestor details? I wonder if there are other cases like this.

Maybe this should work with anything with hidden=until-found ?

Yes, if we do it for details then we should definitely do it for hidden=until-found as well.