#Adaptive Select

#Adaptiveness

• Desktop: doesn't block interaction with other page elements when open
• Android & iOS: uses the native device select
• iOS: native styling

#Variations

#Native Limitations

• The event.target.value for the native onChange event is always a string
• The option element browser support & React support for content other than text is currently limited MDN

#No Selected Value

The first value is auto selected if there's no specified selected value on a native select. To compensate for this the AdaptiveSelect adds a hidden option with a empty value, which can be removed using the nativeEmptyValueOption prop if needed.

#Disable Native

To disable the native select for all environments, native={false} can be added to the component or theme

#API

MUI Select API with the following changes:

• input defaults to AdaptiveInput, AdaptiveFilledInput, or AdaptiveOutlinedInput
• Desktop: MenuProps.disableScrollLock defaults to true
• Desktop: MenuProps.slots.root defaults to ModalNonBlocking
• Android & iOS: native defaults to true

#nativeEmptyValueOption

Adds a hidden empty value option element when native

• Type: boolean
• Default: true

#AdaptiveSelectItem

MUI MenuItem API with the following changes:

• Props not applicable to a <option> element are ignored on native. See the source for the full list of ignored props.

#AdaptiveSelectItemGroup

MUI ListSubheader API with the following changes:

• Props not applicable to a <optgroup> element are ignored on native. See the source for the full list of ignored props.

#Links

• Component Source 
  adaptiveSelect.tsx
• Doc Source adaptiveSelect.mdx
• MUI Select