NumberField onChange strange behaviour: in Modal edit is lost on "enter"

[mperrando]

It appears that onChange fires only when the field lose the focus.

This is a problem when I put a NumberFiled in a Modal: the onChange event is missed if I press "enter" to confirm the modal, losing the user edit.
How can I use it inside a Modal?

Thank you.

https://playroom.bento.buildo.io/#?code=N4Igxg9gJgpiBcJgApkEoAEBeAfB4AOgHYYaREDOALhgNoCWFA8gA4xEA0GFMVAkszZEAutgwAlGAEMwVAHQBXHgGUqUqjGQAzKQBseaANzFS5anQBuehTC48qANWsxRWCdNmKVajcgIh-IxMyCEoaWitdO14nXVd3GXklGFV1TQAGIJIMACdeBRySP2zSAB4cYNIygCEFKipQyqrSCnoALxgsfwBbGCh6BW7-JuaAa3oiKC6QCghdeihhkuaMAAt6GBypHLBVgE9plhz6bu29pZWq3SkAIxhdaYBhebBRjF6AQgvLjFCABTyFAoWBQmFw3F4AlY7GQVByNjQAF8RhgAPQVZZlVKvbgsGSdYAARgAbIiMT8MKVqtA9tx2p0en0BkMQDgAHJSXrwfCRGyI0qo6lQPbkn5Uml0jrTXr9Qb%2BHCxbnASL8wU00XNAXY0YaqrARjQkgAMiNGGKFNKAFloHoUc0qPQqLoGSBrVBbQFMStQs8IDwQehsHh7FChNo9AZkV7mkcTmcAIKyeihEGEaMra53XTc-xMADS-g4du9RABMCB3MD4LTFMuIcEMJ0%2BhgWVrVURRfTpERUbbPHI7pye0TDpTwBrbYwmfuOZAjykRDA90Lxea-0BFErYODkIbRHDzbQnbbPeLusupQAKjAAB5UABiG10iy7VSInJd7963zb04e-g5b9PUnDAWGuJdVjmWAcmmS89jYNZNhgOQUJ-WteQJDDe0nH1VgXABzAl7FiPlVzRc8VlKNlBjuHJH3uF8QK-F1IjQik-2mWI2J%2BMD8Ug59Nlg%2BCYEQvIULkbjLgwkEVTI0hcIIoiYj0bCKXRYsBTdPQKKRJoBVFLJETQdAoxAREgA

[ghubguil]

Hi @gabro @veej, have you had the chance to take a look at this discussion? We're quite stuck on this issue

[veej]

Hi @mperrando @ghubguil,
The NumberField is based on the react-aria implementation, which validates the value onBlur, as per documentation here

The onChange event is triggered whenever the number value updates. This happens when the user types a value and blurs the input, or when incrementing or decrementing the value. It does not happen as the user types because partial input may not be parseable to a valid number.

As you experienced, when you submit a form in a modal by pressing Enter, the field is never blurred, so the NumberField's onChange is never called. The same doesn't happen if you click on the dialog's primary button, since the click triggers the focus on the button, blurring the NumberField before submitting.

We'll work on a fix in the library, but in the meanwhile you may find a workaround for forcing the blur on submit, e.g. by focusing another dummy element in the dialog's primaryAction handler.