fix(Select): set text color in native version #1141
Conversation
|
Size stats
|
|
Accessibility report ℹ️ You can run this locally by executing |
There was a problem hiding this comment.
It looks like chrome has issues when setting the text color for native select. I've seen users setting color to initial in order to fix the problem. Doing this fixes the problem, but it also slightly changes the text color in light mode. I believe it's not a big deal, but maybe @yceballost can confirm if we can live with this.
There was a problem hiding this comment.
we can live with this absolutely :)
| @@ -365,7 +365,9 @@ const Select: React.FC<SelectProps> = ({ | |||
| <option value="" style={{display: 'none'}} /> | |||
| )} | |||
| {options.map(({value: val, text}) => ( | |||
| <option key={val} value={val}> | |||
| // Set color: 'initial' to avoid wrong text color in some browsers when using dark mode. | |||
There was a problem hiding this comment.
Styling <option/> element is really tricky, most browsers completely ignore custom styles. The only browser that had the issue reported in the ticket is (afaik) Chrome. I've verified that this change fixes the problem in that browser and that none of the other ones are affected:
- FF / Chrome in Linux ✔️
- Safari in a VM ✔️
- Safari / Chrome in iOS ✔️
- Chrome in Android ✔️
- Chrome in Windows ✔️
|
Deploy preview for mistica-web ready! ✅ Preview Built with commit bab1eac. |
# [15.11.0](v15.10.0...v15.11.0) (2024-06-19) ### Bug Fixes * **ButtonLayout:** add bleed when using only link ([#1150](#1150)) ([554f98a](554f98a)) * **Counter:** add aria-live to value ([#1146](#1146)) ([3e2e09b](3e2e09b)) * **Header:** bleed not working in o2-new skin ([#1137](#1137)) ([00fb632](00fb632)) * **MainNavigationBar:** remove logo space in mobile when no sections are given ([#1149](#1149)) ([e4c03a0](e4c03a0)) * **Select:** set text color in native version ([#1141](#1141)) ([eedf265](eedf265)) * **Spinner:** use controlActivatedInverse token as default when used inside inverse variant ([#1133](#1133)) ([38a192d](38a192d)) ### Features * **Cards:** improve accessibility ([#1139](#1139)) ([dde9cc5](dde9cc5)) * **Chip:** allow using badge in selectable chips ([#1134](#1134)) ([9ecda7c](9ecda7c)) * **Circle:** custom background support ([#1136](#1136)) ([bedeaa4](bedeaa4)) * **CoverHero:** new component ([#1144](#1144)) ([a655e6e](a655e6e)) * **DisplayMediaCard, PosterCard:** add extra ([#1131](#1131)) ([501cf73](501cf73)) * **EmptyState:** allow using only ButtonLink as action ([#1140](#1140)) ([d73c219](d73c219)) * **HighlightedCard:** support for alt for image ([#1135](#1135)) ([c9ba728](c9ba728)) * **Image:** Custom fallback icon in Vivo New ([#1145](#1145)) ([ec600fe](ec600fe)) * **Switch:** Improve animation ([#1142](#1142)) ([8162eed](8162eed)) * **Table:** new component ([#1129](#1129)) ([328e013](328e013)) * **Timer:** create component ([#1130](#1130)) ([0b3253e](0b3253e)) * **Touchable:** newTab support in to links ([#1143](#1143)) ([eff07e3](eff07e3))
|
🎉 This PR is included in version 15.11.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Issue: Link