score:7

Accepted answer

I couldn't find a really clean way, but the following seems to do the trick:

<InputLabel shrink={false}>
    {selected !== '' && 'Select item'}
</InputLabel>

Adding the shrink={false} makes sure the label doesn't move up when focussed. With the default Material-UI styling the options will be over the InputLabel, so you won't see it when selecting. Then, when a value is selected the selected variable will be set and the text will hide from the label.

If the select items don't appear over the InputLabel because of your custom styling you can maybe track the focus with onFocus and onBlur to hide the label content when the select is focussed.


Related Query

More Query from same tag