[disable] and hide the default <ListboxOption/> option

[adebiyial]

Let me explain.

Typically you'd have a <select/> like:

<select>
    <option value="">State</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
</select>

that renders normally with one issue: the first option (with value, state) is selectable and requires validation.

That behavior can be altered with <option style="display: none;" value="">State</option>. Displaying it as none makes sure that:

1. It exists but is not selectable
2. Selecting a different option causes it to be "visually hidden" i.e, it can't be seen and hence can't be selected.

ListboxOption

The default ListboxOption should not always be selectable.

<ListboxOption value="default" label="Choose a taco">
  <Taco /> Choose a taco
</ListboxOption>

The disabled prop doesn't do entire justice, the option still remains visible.

<ListboxOption value="default" disabled label="Choose a taco">
  <Taco /> Choose a taco
</ListboxOption>

To achieve the display:none stuff as described on the HTML <select/> above, what I'm suggesting is to include a defaultSelectable boolean prop or use hideDisabled combined with disabled.

<ListboxOption value="default" defaultSelectable={false} label="Choose a taco">
  <Taco /> Choose a taco
</ListboxOption>

or

<ListboxOption value="default" disabled hideDisabled label="Choose a taco">
  <Taco /> Choose a taco
</ListboxOption>

as in — left is the normal behavior, right display the default as none.

The con is, we also get the same behavior as in the HTML <select/> element where selecting a different option causes the default <ListboxOption/> to be "visually hidden".