Color and UX problems with Select component and custom values

App Building
1

Since you are working on the new Select component maybe not much of a priority, but I guess make sure the new one avoids these problems?

  1. If you enable Custom Values and type one in, you would expect that just hitting enter would accept the value just as it works if the item was in the list and you used type-ahead. Instead you are required to click the item that is generated in the drop down.

  2. Speaking of that drop down, it is highlighted with a light blue background and a white foreground making it almost unreadable.

image
image646×612 19.7 KB

I tried to figure out some CSS to fix issue 2 but was unsuccessful.

Edit: I see the problem 2 is actually not related to custom items but happens all the time. When you hover over an item already selected, the highlight turns light blue but the text stays white. It is just more impactful with a customer value.

image

image

2

Hi @Bradlymathews! I believe #1 is resolved with the new select component :blush: Let me know if you're still seeing any issues on your end. Similarly, for #2, we have a new Styles editor to help with this:

638×776 41.7 KB

3

@Tess,

Looks like the new Select component didn't make the cut this week. Next week hopefully!

Unfortunately the Styles editor doesn't have a mouse over background or text option which is what I would need to fix this.

Is there a CSS tag I can hack to fix that? WOuld just need to change the text color to black for a mouseover of a selected item.

4

Hey @bralybathews,

For the styles of the select component it looks like the "Accent" property controls the background color of highlighted items and "Label" controls the color of the font. Does this work for your use case here?

791×251 18 KB

5

@Chris-Thompson ,

The accent color is for a selected item. There is a :hover style in the component that uses a lightened version of the Accent color. The style for the selected item is always white text so a lighter colored Accent will wash out. Combine these and a hovered selected item will always be unreadable.

I need to get at that selected-item:hover css rule to change the text to black, but I can't find it. It also could be that there is no rule for that and it is just using the item:hover. In that case, if I knew the rule for a selected item I I might be able to add a :hover to it.

DropdownColor

6

Hey bradlymathews! Thanks for bringing this to our attention. It definitely doesn't provide a good UX when the value is washed out like that. I have submitted a bug report, and will update this post when I have new information for you!