Multiple Selection in Dropdown
- MultiSelectDropdown.tsx
- data/states.ts
- CodeSandbox
import { useState } from 'react';
import { useMultiSelect, multiSelectDropdown } from '@szhsin/react-autocomplete';
import STATES from '../../data/states';
const MultiSelectDropdown = () => {
const [value, setValue] = useState<string>();
// You can set a few items to be selected initially
const [selected, setSelected] = useState<string[]>(['Alaska', 'Florida']);
// It's up to you how to filter items based on the input value
const items = value
? STATES.filter((item) => item.toLowerCase().startsWith(value.toLowerCase()))
: STATES;
const {
getInputProps,
getClearProps,
getToggleProps,
getListProps,
getItemProps,
removeSelect,
isItemSelected,
isInputActive,
isTagActive,
open,
focusIndex,
isInputEmpty
} = useMultiSelect({
flipOnSelect: true, // or false
items,
value,
onChange: setValue,
selected,
onSelectChange: setSelected,
feature: multiSelectDropdown({
// Options: rovingText, closeOnSelect
rovingText: true,
closeOnSelect: false
})
});
return (
<div>
<button {...getToggleProps()}>{selected.length} selected</button>
{open && (
<div
{...getListProps()}
style={{
position: 'absolute',
color: '#000',
background: '#fff',
maxWidth: 320
}}
>
<div
style={{
display: 'flex',
flexWrap: 'wrap',
border: '2px solid #aaa',
gap: 6,
padding: 6
}}
>
{selected.map((tag) => (
<button
key={tag}
onClick={() => removeSelect(tag)}
// Highlight the active tag that can be removed with the Backspace key
style={{ color: isTagActive(tag) ? 'red' : 'initial' }}
>
{tag}
</button>
))}
<div>
<input
placeholder="Type..."
{...getInputProps()}
style={{ caretColor: isInputActive ? 'auto' : 'transparent' }}
/>
{!isInputEmpty && <button {...getClearProps()}>X</button>}
</div>
</div>
<ul
style={{
listStyle: 'none',
overflow: 'auto',
maxHeight: 300,
margin: 0,
padding: 0
}}
>
{items.length ? (
items.map((item, index) => (
<li
style={{
background: focusIndex === index ? '#ddd' : 'none'
}}
key={item}
{...getItemProps({ item, index })}
>
{item}
{isItemSelected(item) && '✔️'}
</li>
))
) : (
<li>No options</li>
)}
</ul>
</div>
)}
</div>
);
};
export default MultiSelectDropdown;
// https://en.wikipedia.org/wiki/List_of_states_and_territories_of_the_United_States#States
export default [
'Alabama',
'Alaska',
'Arizona',
'Arkansas',
'California',
'Colorado',
'Connecticut',
'Delaware',
'Florida',
'Georgia',
'Hawaii',
'Idaho',
'Illinois',
'Indiana',
'Iowa',
'Kansas',
'Kentucky',
'Louisiana',
'Maine',
'Maryland',
'Massachusetts',
'Michigan',
'Minnesota',
'Mississippi',
'Missouri',
'Montana',
'Nebraska',
'Nevada',
'New Hampshire',
'New Jersey',
'New Mexico',
'New York',
'North Carolina',
'North Dakota',
'Ohio',
'Oklahoma',
'Oregon',
'Pennsylvania',
'Rhode Island',
'South Carolina',
'South Dakota',
'Tennessee',
'Texas',
'Utah',
'Vermont',
'Virginia',
'Washington',
'West Virginia',
'Wisconsin',
'Wyoming'
];
CodeSandbox