[Bug]: Number field unusable in Safari with Japanese Romaji IME

[moisadoru]

trafficstars

Code of conduct

• [X] I agree to follow this project's code of conduct.

Impacted component(s)

number-field

Expected behavior

The number field component should be usable across all supported browsers withe the Japanese IME enabled.

Actual behavior

When Japanese Romaji IME is activated, the number field does not correctly interpret the input. For instance, pressing 5 and then 0 should set the value 50. In Safari, the value that is set in the field is 550. Furthermore, when pressing Backspace, and extra 5 is added, so the value becomes 5505. Pressing 1 will add whole chunks of 1 followed by an arbitrary number of 0 digits.

Screenshots

Here is a small video of the above described behavior of the input field with Japanese ROmaji IME enabled:

https://user-images.githubusercontent.com/109328/166923081-9d74c4be-2b1c-496c-9038-29a86c74c376.mp4

What browsers are you seeing the problem in?

Safari

How can we reproduce this issue?

1. Go to the number-field docs page
2. Change the IME to Japanese - Romaji (to add it to the list, go to System Preferences -> Keyboard -> Input Sources, click on +, find Japanese, add Japanese - Romaji)
3. Focus the number field (optionally clear it's contents)
4. Type 5, 0, <Backspace>, 1, 1...
5. Observe the value in the number field

Sample code that illustrates the problem

No response

Logs taken while reproducing problem

No response

[Westbrook]

I'm only able to recreate this with Japanese - Hiragana input, can you confirm that you're seeing this in Japanese - Romaji? If there are any other settings you've leveraged on that input source, please share that as well.

[joekukish]

@Westbrook I though we had fixed this already with https://github.com/adobe/spectrum-web-components/pull/2019

[moisadoru]

I'm reproducing this with Japanese - Romaji in Safari 15.4 (macOS Monterey 12.3.1) with default IME settings:

Also:

[Westbrook]

We may be close to a solution with https://number-field-composition--spectrum-web-components.netlify.app/storybook/?path=/story/number-field--default.

It requires extensive testing. On the manual side, we'd love the support of any team looking to leverage this in confirming that we're in a good place here. On the unit side, we need to get some more written, which is awkward as IME is really hard to test.

[Westbrook]

Fixed in nFixed by #3610