@idot-digital/dropdown-selector NPM

@idot-digital/dropdown-selector

A complete rework of the Select component from @material-ui/core
Pass MenuItems, ListSubheaders, etc. as you would using Select
Dropdown offers the possibility to filter for errors in various ways and type in either custom values or search for existing in the list below it.

Install

npm install --save @idot-digital/dropdown-selector
yarn add @idot-digital/dropdown-selector

Usage

Dropdown should be wrapped inside DropdownWrapper in order to ensure no clipping issues inside "overflow: 'hidden'" containers as shown below. Positioning as "position: 'relative'" inside such containers will break the overlaying search.
Dropdown is using TextField from @material-ui/core. Additional props and settings can be found here https://material-ui.com/components/text-fields/
Children of Dropdown are equal to Select from @material-ui/core. An example is listed below. Additional props and settings can be found here https://material-ui.com/components/selects/

import React from 'react'

import Dropdown, {
  Content,
  DropdownWrapper
} from '@idot-digital/dropdown-selector'

import { ListItemText, ListSubheader, MenuItem } from '@material-ui/core'

const App = () => {
  const [search, setSearch] = React.useState('initial value') // Either use internal or external search state for input

  return (
    <DropdownWrapper>
      <div
        className='scrolling component where Dropdown could be clipped'
        style={{ height: '2000px' }}
      >
        <div className='other components' style={{ height: '1000px' }}></div>
        <div
          className='wrapping component with overflow hidden'
          style={{
            overflow: 'hidden',
            position: 'unset', // Settings position to relative, absolute or fixed will break the dropdown
            height: '200px',
            width: '200px'
          }}
        >
          <Dropdown
            value={search}
            onChange={(value) => setSearch(() => value)}
            onChangeDone={(selection: Content) => console.log(selection)} // Callback when blured or picked
            notEmpty // First element of content will be selected
            overwriteSearchOnError // Overwrites search on onChangeDone when an error occurs
            allowCustomInputs // Various error states
            errorOnEmpty
            errorAtStartup
            errorWhileFocused
          >
            <ListSubheader>First</ListSubheader>
            {['LongTextThatIsTotallyClipped', 'First', 'Second', 'Third'].map(
              // value must be passed as a string at the root menu element. Otherwise the item will be ignored
              (item) => (
                <MenuItem value={item as string} key={item}>
                  <ListItemText primary={item} />
                </MenuItem>
              )
            )}
            <ListSubheader>Second</ListSubheader>
            <MenuItem value='some other value that is filtered'>
              Manual
            </MenuItem>
          </Dropdown>
        </div>
      </div>
    </DropdownWrapper>
  )
}