Component: Dropdown

[ItsJonQ]

Dropdowns

Below is a collection of notes for the development of Dropdowns for Blue.

Markup structure

Below is the JSX structure we want for dropdowns. This is subject to change!

Example

<Dropdown>
  <Dropdown.Trigger>Click</Dropdown.Trigger>
  <Dropdown.Menu>
    <Dropdown.Item>Item</Dropdown.Item>
    <Dropdown.Item>Item</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

Nested Example

<Dropdown>
  <Dropdown.Trigger>Click</Dropdown.Trigger>
  <Dropdown.Menu>
    <Dropdown.Item>Item</Dropdown.Item>
    <Dropdown.Item>Item</Dropdown.Item>
    <Dropdown.Item>
      Item
      <Dropdown.Menu>
        <Dropdown.Item>Item</Dropdown.Item>
        <Dropdown.Item>Item</Dropdown.Item>
        <Dropdown.Item>Item</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

Alternative idea for the trigger

<Dropdown trigger={<Button>Click</Button>}>
  <Dropdown.Menu>
    <Dropdown.Item>Item</Dropdown.Item>
    <Dropdown.Item>Item</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

Additional things to consider

Menu

• Should be scrollable after a certain height
• Should not focus items when scrolling (if mouse is hovering over items)
• Should always be aware of child menus, not the other way around
• Should calculate/adjust menu height if it will extend beyond the page

Nested

• Should also be Portal'ed into position

Overlay

• Should be added only on the root dropdown menu
• Should prevent interaction with page elements
• Should close dropdown on click

Position

• Should always calculate best position before mount (to ensure the dropdown is on screen)

---

Mouse

Hovering

• Should open nested menu if mouse hovers over item, after a certain time (example: 100ms)
• Should collapse nested dropdown if mouseenter into parent menu
• Should not collapse nested dropdown on mouseleave

---

Keyboard

Tab

• Should function like native HTML <select>

Escape

• Should collapse the most nested menu first
• Should not collapse all menus

Arrows (left/right/up/down)

• Should open dropdown based on declared drop position (e.g. direction='up')
• Should have a default drop direction of down
• Should collapse nested dropdown on left
• Should expand nested dropdown on right

---

Examples

The best examples for what we want to emulate is with how Apple handles dropdowns. Check out the dropdown menus in the top bar in Mac OS.

---

These came up after a lovely 🍐 session/discussion with @alisdair