Dropdown list
Dropdown list is a compact way of displaying a list of options. It appears when a user clicks a button, icon or keyboard shortcut.
- Behavior
The drop menu grows to the width of the longest list item. Long list item names will truncate (…) at max width of the drop menu - padding.
The drop menu can be dismissed by clicking outside, clicking on the trigger, or with the ESC key.
- Keyboard navigation:
- Arrows cycle focus through menu items.
- Esc key closes the drop menu and moves focus back to the menu trigger.
- Tab key closes the drop menu and moves focus to the next focusable element on the page.
Select all
,
onItemSelect: onToggleAll,
isSelected: false,
divider: true
};
return itemsConfig.reduce(
(acc, { id, isDisabled }) => {
acc.push({
itemId: id,
content: `Item ${id}`,
icon: Clear all
) : (
Select all
);
this.setState({ listItems });
}
handleToggleAll() {
const isAllItemsSelected = this.isAllSelected(this.state.listItems);
const listItems = this.state.listItems.map(v => {
if (v.itemId === TOGGLE_ALL_ITEM_ID) {
return {
...v,
content: !isAllItemsSelected ? (
Clear all
) : (
Select all
)
};
}
return !v.isDisabled
? {
...v,
...{
isSelected: !isAllItemsSelected
}
}
: v;
});
this.setState({ listItems });
}
isAllSelected(items) {
return !items.some(v => {
return v.itemId !== TOGGLE_ALL_ITEM_ID && !v.isDisabled && !v.isSelected;
});
}
render() {
return (
(
Toggle dropdown
)}
>
);
}
}
(
Menu
)}
>
);
}
}
console.log(`Custom item selected: ${itemProps.itemId}`)
}
>
Custom Item - {itemProps.itemId}
);
}
handleClose() {
this.setState({ isVisible: false });
}
handleTriggerClick() {
this.setState(prevState => ({ isVisible: !prevState.isVisible }));
}
render() {
return (
(
Menu
)}
>
);
}
}
Toggle
{state.isOpen &&
```
```js noeditor
const generateItems = (length = 10) =>
Array.from(new Array(length), (value, index) => ({
itemId: index + 1,
divider: index === 2,
content: `Item ${index + 1}`,
icon:
;
```
Examples:
- with selectable items:
Remember to take care of your app performance. You should avoid rerenders. The most common mistate is always returning new array with new items (objects) in maps/filters. Take a look at example:
```js
const generateItemsConfig = () =>
Array.from(new Array(20), (value, index) => ({
id: index + 1,
isDisabled: (index + 1) % 3 === 1
}));
const itemsConfig = generateItemsConfig();
const getListItems = (onItemSelect, onToggleAll) => {
const batchItem = {
itemId: TOGGLE_ALL_ITEM_ID,
content: