A Dropdown in Hyperscript

2025-02-17
todo

I'm currently learning hyperscript and I'm going through the Alpine Dropdown component. This gives be a basic structure to follow.

I think it's helpful to have the functionality described in a step by step process and then to implement each step using hyperscript.

The following things are what we need for a dropdown.

Click a button and open the dropdown

The dropdown should toggle on the click

If you press Escape inside the dropdown, it should close the dropdown

If you click outside the dropdown, it should close the dropdown

Aria attributes - aria-expanded, aria-controls these go on the button

Focus out of the dropdown should close the dropdown

Click out should focus the button after the dropdown is closed

Add transition for dropdown coming in and going out