fix(Select): onChange was called twice and there was an empty option in iOS #1185
Conversation
…s an empty option in iOS
| if (onChangeValue) { | ||
| onChangeValue(e.target.value); | ||
| } |
There was a problem hiding this comment.
this fixes https://jira.tid.es/browse/WEB-1953
|
Size stats
|
|
Accessibility report ℹ️ You can run this locally by executing |
|
Deploy preview for mistica-web ready! ✅ Preview Built with commit 474a009. |
| // Chrome doesn't show this option when the select menu is open (because of display: none), | ||
| // but Safari does. So we use the select's label for this option, otherwise it would be shown | ||
| // as an empty option, which is weirder. | ||
| <option value="" style={{display: 'none'}} aria-label=""> |
There was a problem hiding this comment.
the empty aria-label is needed to avoid screen reader to read the select label twice
There was a problem hiding this comment.
Should we add screenshot tests to cover the new behavior?
There was a problem hiding this comment.
that's not possible, the new behavior only happens in iOS/Safari
# [15.17.0](v15.16.4...v15.17.0) (2024-08-01) ### Bug Fixes * **Chip:** missing data-component-name when closable ([#1191](#1191)) ([e4e284f](e4e284f)) * **Dialogs:** avoid double execution of native dialogs ([#1183](#1183)) ([68c8db7](68c8db7)) * **Select:** onChange was called twice and there was an empty option in iOS ([#1185](#1185)) ([c44b25b](c44b25b)) ### Features * **icons:** New box, High-priority and MMS icons ([#1188](#1188)) ([edff352](edff352)) * **Rows:** a11y update ([#1180](#1180)) ([5f995ad](5f995ad)) * **ThemeContextProvider:** expose TextPreset size/lineHeight tokens as css vars ([#1178](#1178)) ([921eacf](921eacf))
|
🎉 This PR is included in version 15.17.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
WEB-1953 WEB-1954
We want to support the case of a Select without a selected initial option. To support this we are including an additional default empty
<option>in the<select>.We style this empty option with
display: noneto avoid this option to appear in the select list when we open it. This works as expected in Chrome:But it doesn't work as expected in Safari, and the empty option is shown when the select is open:
The fix:
The best fix I've found is using the select's label for that empty option:
And once one of the options is selected, we remove the empty one. So, if we open the select again, the empty option isn't shown anymore (like in Chrome):