[Select] Content position not relative to the trigger if the component have no selected value

[BarneyGamble]

When i use the select component with no starting value, the bubble appear on top left of the window when i trigger the component.
When i select one value, then the bubble have a good place the next time.

---

I succesfully reproduce the bug in the radix-ui storybook by remove the defaultvalue prop on any stories.
I try to fix it locally but i don't master react portal.

[nunocaseiro]

+1

[jjenzz]

You have to supply a defaultValue, that's why it exists in the stories 🙂

[BarneyGamble]

Effectively, in comparaison there is a story "Unset" on radio-group.
It is not a bug, just something not covered for the moment.
I hope you will improve this component with this functionnality.

[jjenzz]

If you want an empty option to be selected by default you can add an empty option and set it as the defaultValue:

  <Select.Root defaultValue="empty">
    <Select.Trigger>
      <Select.Value />
      <Select.Icon />
    </Select.Trigger>
    <Select.Content>
      <Select.ScrollUpButton />
      <Select.Viewport>
        <Select.Item value="empty">
          <Select.ItemText />
        </Select.Item>
        <Select.Item value="one">
          <Select.ItemText>One</Select.ItemText>
        </Select.Item>
        <Select.Item value="two">
          <Select.ItemText>Two</Select.ItemText>
        </Select.Item>
      </Select.Viewport>
      <Select.ScrollDownButton />
    </Select.Content>
  </Select.Root>

@benoitgrelard I wonder if it would be worth automatically rendering this empty item for consumers if there's no defaultValue. It can render with "Please select an item" text or something like react-aria does?

[Elia-Darwish]

What I did is to render the “placeholder” Item conditionally. Maybe providing a built-in “placeholder” component would be good?

Also, I don't seem to manage to change the color of the SelectValuecomponent for some reason!

Here is a CodeSandbox link showing what I mean:

https://codesandbox.io/s/radix-select-6jw83e?file=/App.js

[benoitgrelard]

It can render with "Please select an item" text or something like react-aria does?

If we do that automatically, we get into the whole i18n thing, not sure we want to do that.

[benoitgrelard]

Hi, I am closing this one as this is expected behaviour at the moment.
However, there is a related issue with a proposal for a "placeholder" part which could help with this question: #1235