Using select with boolean values causes the label to overlap the selected value

[jadhindieh]

Describe the bug When using the select component with options as boolean true or false, the label will initially be correctly displayed. But once I change the selected value and lose focus from the component, the label will go back to the place it would be at when no data is selected.

To Reproduce Consider the following code:

<Select bind:value={bindedValue} label="will not float after select" style="width:100%">
    {#each [true, false] as option}
        <Option value={option}>{option == true ? 'Yes' : 'No'}</Option>
    {/each}
</Select>

1. Click on the select component
2. Choose an option
3. Lose focus from component
4. See error as screenshot

Expected behavior The label should be floating

Screenshots

Desktop (please complete the following information):

• OS: MacOs
• Browser Chromium
• Version 101.0.4932.0

Additional context Debugging the issue further by inspecting the element I saw that when we have a list of strings the class "mdc-floating-label--float-above" is added to the label, but when the option is a boolean, this class is not appended to the label which is causing the text overlap.

[WillPoulson]

I'm also getting this issue without using boolean options. Did anyone find a solution?

[agmcleod]

Seeing this too in v6 beta 16. Two drop downs with the same list, one selected & the other focused.

[loganwyas]

I have also noticed this happening when using objects as the value. Has there been a fix to this issue?

[mell0kat]

I am noticing the same behavior!

[ctrlsam]

Same with integers too

[vettich]

Try pass key in Select

<Select ... key={v => `${v}`}>...</Select>

[felbsn]

Try pass key in Select

<Select ... key={v => `${v}`}>...</Select>

this solved issue for me

[hperrin]

Yes, the key always needs to be a string, so you can pass a function to the key prop to turn whatever your value is into a string. @loganwyas, same solution as above ^ just return a string that uniquely identifies the object. The last demo on the Select Demos page has an example of that.

[hperrin]

I think I should move that example to be the second one, so it's easier to find.