[number field] Input with `aria-hidden` focus prevents form submission

[markoffden]

Bug report

Current behavior

In some scenarios when submitting a form with Number Field component in it, the following console warning appears and form submit event is not triggered:

Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
Element with focus: <input>
Ancestor with aria-hidden: <input> 

Component is used with following format settings:

format={{
    style: 'currency',
    currency: 'EUR',
    currencySign: 'standard',
    currencyDisplay: 'symbol',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
}}

A way to reproduce

1. Set up a basic HTML <form> with Number Field (with Field component wrapper in my case) in it and <button type="submit">.
2. Input some random number, e.g. 12.
3. Click somewhere outside the input.
4. The input gets formatted to 12,00 €.
5. Comeback to input and edit cents, e.g. 12,33 €.
6. Try to submit form, submit event is not triggered and above warning appears in browser console.

Expected behavior

Editing Number Field component value should not block form submission

Possible solution

Use inert instead of aria-hidden="true" on "mirror" input.

Base UI version

v1.0.0

Which browser are you using?

Google Chrome 143.0.7499.110

Which OS are you using?

Mac OS Sequoia 15.7.2

[mj12albert]

@markoffden I couldn't reproduce this following your steps: https://stackblitz.com/edit/k4phztfm?file=src%2FApp.tsx

[markoffden]

Thanks for jumping in @mj12albert 👋

I think I have figured out what's causing this. My step prop was set up to 1 and apparently browser validation was kicking in, though I didn't see the popup message. As soon as I set step to 0.01 for currency format, the issue seems to be gone 🤔

[mj12albert]

Actually it doesn't seem right that in my stackblitz, I can submit a non-integer value when the step was left at the default of 1 👀

[markoffden]

Somehow I've managed to get those Chrome validation messages popping up in your Stackblitz, when trying to submit float currency value with step 1. But after refresh they are gone, and now again I am fine submitting ignoring step 1, yeah, does not seem right 🤔 Exact pattern from my local dev env with step 1, sometimes it's ok, sometimes submit it not triggering.

[atomiks]

It's reproducible (Stackblitz) with a controlled native <input type="number" step={1}>. When it's uncontrolled, the validation popup appears when entering a decimal value, but not when it's controlled. <NumberField.Root> uses a controlled value on the hidden input

---

Edit: Adding min={0} seems to work to trigger the validation properly in controlled mode

facebook/react#12334

---

As for the original issue, I'm guessing the browser is maybe trying to focus the visually-hidden <input> element when the native validation kicks in? Maybe we need to redirect focus to the actually visible input using onFocus() on the hidden input, which is what other components (like Checkbox) do