search

adobe / spectrum-web-components

Spectrum Web Components
https://opensource.adobe.com/spectrum-web-components/
Apache License 2.0
1.21k stars 192 forks source link

[Bug]: `change` event is not triggered for double byte characters on Safari #4579

Open Rocss opened 5 days ago

Rocss commented 5 days ago

Code of conduct

Impacted component(s)

sp-number-field

Expected behavior

Given that I enter a double-byte number in a sp-number-field, I expect that a change event is triggered when I press enter or on blur with the correct value, which should be the equivalent of what I entered, in single byte characters. This works well on Chrome, but not on Safari.

Actual behavior

change event is not triggered on enter keypress, only the input event input and change events are not triggered correctly on blur, event.target.value is NaN

Screenshots

https://github.com/adobe/spectrum-web-components/assets/13311865/ed3312f9-fb95-4e2e-b9d7-dbc2e0b8a982

What browsers are you seeing the problem in?

Safari

How can we reproduce this issue?

  1. Open Safari browser (I used v17.5)
  2. Go to https://opensource.adobe.com/spectrum-web-components/storybook/index.html?path=/story/number-field--default
  3. In your system settings, select "Japanese" as the IME
  4. Type any number in the sp-number-field component
  5. Observe behaviour on enter keypress and blur

Sample code that illustrates the problem

The problem seems to be the fact that when entering double-byte characters, sp-number-field converts the characters to single byte using a map, and then sets the input value with the new and processed number. Seems like input does not trigger a change event in Safari when you set the value of the input programatically. I could not find a workaround for that.

Logs taken while reproducing problem

No response