Styling Select.Value

https://github.com/radix-ui/primitives/blob/23b934c1aeed966f15fda1222655f24fb0b5f311/packages/react/select/src/Select.tsx#L251

I’m not sure how important it is for Select.Value to not be styled. It’s preventing me from using Select.Trigger as a flex container and adding flex: 1 to Select.Value to get the select to stretch to fill the container.

[iammola]

HI @benoitgrelard.

The first method is the better option for me. I had no idea you were allowed to do that though and I can see how both methods can be overused to avoid the style filtering on the Select.Value.

Now I’ve seen it’s possible/allowed to add a parent to the Select.Value. From what I can assume, any extra styles you want on it can be done that way. Like in @avin-kavish’s case, If I add flex: 1, the extra span does fill the container, and the Select.Value does as well.

So just using another parent may work for simple cases and you probably won’t have to change anything with the current behaviour, but add a section in the docs talking about adding an extra parent as a means to add styles to the Select.Value that the user is sure won’t change its original position. I’m obviously not sure and haven’t run any tests, so If what I’m saying isn’t stable or advised or straight-up crap, forgive me🙏.

Thanks again and have a nice rest of your day. I appreciate it 🙌

[benoitgrelard]

Hey @iammola,

Yeah the truncating/ellipsis is definitely one I’ve been thinking about. I am reluctant to add “easy” styling of Value though but perhaps as people will expect it to “just work” in all cases. But maybe I am worrying too much… not sure.

In the meantime, you could do this as an escape hatch:

<Select.Trigger style={styles.trigger}>
+  <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
    <Select.Value />
+  </span>
  <Select.Icon />
</Select.Trigger>

Or, you could even use CSS to target that first span:

.trigger > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

I am aware that with that second method you can still break it by adding padding-left for example, because you’re now adding styles directly to the value, rather than a parent, but at least you have to get out of your way to break it.

What do you think?