x-numberinput does not respect min and max values always

[mmakrzem]

I created a number input field like this:

<x-numberinput min="1" max="9">
</x-numberinput>

I can put focus inside the input field with my mouse and type in a number outside the max/min range and the input field continues to show the value I entered even when I move my focus out of the input field. ie 4575. Sometimes if I click inside and then out again, the number value changes to fit in the range ie 9, but most of the time, the min and max values are not respected.

i'd like to listen to events when this value changes, but not when I type. Only when I leave the input field. I'm currently using inputEl.addEventListener( 'focusout', () => {} ); for this. However once this bug is fixed, will focusout still work. ie will it report to me the correct clamped value?

[mmakrzem]

Okay, I have figured out when it fails.

If I set the max value to 9 and the initial value to 3, then do the following. Set the value in the input field to something larger than 9 (ie 25). As soon as I lose focus, the value changes from 25 to 9 as expected. If now I change the value from 9 to 30 (another value larger than 9) and lose focus, the input field does not change back to 9!

If however, I manually set the value in the input field to a value that is valid (between 1 and 9) then everything starts working again. So the input field only checks for the min/max range once. If the value goes outside of that range, it doesn't check it again, until I put the value back into the correct range.

[jarek-foksa]

This bug should be fixed in version 0.0.153, please reopen the issue if you can still reproduce it.

[mmakrzem]

looks good!