USWDS - Bug: Form validation does not work within modal

[ZHeCensus]

Describe the bug

When a form is within a modal and the submit button (includes data-close-modal) is clicked. Client-side validation is ignored and the modal closes without any alerts or the form submitting.

A message in the console is logged - An invalid form control with name='...' is not focusable.

#4953 Related

Steps to reproduce the bug

See https://codepen.io/zhecensus/pen/KKYRLbb

1. Create a modal and add a form into modal__content.
2. Add an input with a requirement
   <input minlength="4" maxlength="4" pattern="[0-9]*" />
3. Modify the main modal button from type=button to type=submit form='formid'

---

4. Fill in the form field with an invalid value
5. Click on main modal button
   The modal should close instead of the expected behavior below

Expected Behavior

The browser's built-in validation focuses and prompts the user with an error message.

Related code

No response

Screenshots

System setup

Both Edge and Firefox

Additional context

This is a niche issue, and I came up with two workarounds, if this issue does not have to be resolved.

1. Create a separate button that submits the form and leave the data-close-modal button alone. This results in two actions a user must take.
2. Add some javascript that checks for if there is form in the modal on being toggled and does validation before closing the modal. (commented out in the codepen)

Code of Conduct

• I agree to follow this project's Code of Conduct.
• I checked the current issues for duplicate bug reports.

[mejiaj]

Thanks for submitting this.

We'll pull it into our current sprint to investigate this issue.

[mahoneycm]

Thanks for the detailed issue and the code pen example @ZHeCensus !

I was able to replicate this bug using the steps outlined in the issue description in Chrome.