DataForm: Validation on blur hijacks focus from the natural tab sequence in card layout

[NeosinneR]

Description

When using a DataForm with the card layout and required field validation, blurring from any field (via mouse click or tab) triggers validation and auto-focuses the first required field that has an error. This hijacks the user's natural tab order (or whichever input they clicked), making navigation unpredictable.

Step-by-step reproduction instructions

1. Clear the value of the Text field (so it becomes empty/invalid) by updating the story.
2. Open local storybook (npm run storybook:dev).
3. Go to the DataForm validation story.
4. Switch to the card layout.
5. Click into the second field (e.g., Textarea) with the mouse.
6. Press Tab to move to the next field.

Screenshots, screen recording, code snippet

Screen.Recording.2026-03-26.at.13.32.16.mov

Environment info

WordPress 6.9.4, Gutenberg nightly, macOS, Chrome

[oandregal]

Another test that can be done is in the existing storybook:

• go to DataForm > Validation
• switch to card layout
• focus the text field and, without doing any modifications, press TAB

The natural tab behaviour would have been for the textarea field to get focus, but it was password instead (the first field with errors).

Screen.Recording.2026-03-26.at.14.20.04.mov

[oandregal]

Investigated this a bit and it worked like this since we added validation to cards at the beginning of the year. We could retain some of the intentions there:

• trigger errors in the whole card when it collapses
• trigger errors in the whole card upon first blur in any control

While preserving the tab sequence, so it keeps the natural order. How does that sound?

[mirka]

trigger errors in the whole card upon first blur in any control

Wouldn't this be stressful for users? Imagine a card with 4 required text fields. When you fill in the first field and move to the next field, it's going to trigger errors on the rest of the fields, making it all red. Pretty intense for the happy path.

[Shekhar0109]

Thanks for reporting this issue!

I’ve opened a PR that preserves the natural tab order while keeping validation behavior intact.

PR: #76839

The fix ensures reportValidity() only runs when the invalid input remains the active element, preventing focus from being hijacked during keyboard navigation.

[oandregal]

trigger errors in the whole card upon first blur in any control

What if we recalibrate this to: trigger errors for all controls in the card when the card losses focus. Essentially, replicating at the card level what we do at the component level (validate on first blur).