Input Masking: Last Pressed Character Shows Unmasked (even if it suspposed to be)

[YvanJAquino]

Describe the bug

I'm trying to create a social security number text input that works similarly to password fields. The one here: https://playground.solidjs.com/anonymous/65910f45-2200-4237-91a9-6562caba35b6 seems to meet my needs but the last entered character appears (even though it's not a recorded value)

Your Example Website or App

https://playground.solidjs.com/anonymous/65910f45-2200-4237-91a9-6562caba35b6

Steps to Reproduce the Bug or Issue

1. Use the provided link (https://playground.solidjs.com/anonymous/65910f45-2200-4237-91a9-6562caba35b6) to visit the Playground
2. In the preview enter a fake SSN. Test the show functionality; observe the last character is always displayed.

Expected behavior

As a user, I expected the last character to be masked as well. React does this.

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: Chrome
• Version: [e.g. 91.1]

Additional context

No response

[atk]

Have a look at the input-mask primitive - trying to preventDefault() the event is incredibly brittle across several browsers, so I devised this method instead.

[ryansolid]

I see. This issue got buried for a bit but finally got to looking at what's going on. And the problem is that the KeyDown event runs before the browsers input event.. so even if you modify the value during keydown the input itself ends up adding it afterwards. React completely hijacks the input event to handle this but it isn't how the browser natively works.

But since you can update the text directly from the keydown why not prevent default when you set the value as well. This seems to work for me: https://playground.solidjs.com/anonymous/7d3a9042-9e06-4299-a7d1-730f57a5d1cf

In any case this seems like React oddity causing the wrong expectation. So closing this as it isn't something we would fix.