✨ Implement `<Combobox />` component

dmcnamara-eng commented 2 years ago

✨ What Changed and Why

This PR is a functionally complete implementation of a <Combobox> component based on https://headlessui.dev/react/combobox

Things that this PR implements:

Show/hide options on mouse click
Support for disabled component and individual options
Support for a optional label element
Full mouse support for focus and active elements
Full keyboard support (Enter/Space/ArrowUp/ArrowDown/ArrowLeft/ArrowRight/PageUp/PageDown/Home/End/Escape)
Support for searching the list using the keyboard
Click outside the combobox to close
Full accessibility implementation (aria-expanded/aria-labelledby/aria-controls/aria-haspopup/aria-active-descendent) and focus management
Sample implementation in dummy app
Multi-select

I ported the React component tests for combobox as Ember integration tests. 122 integration tests were ported. Some tests are marked as skip or todo because they are react specific or covered elesewhere.

😈 Before

Didn't exist.

😇 After

https://user-images.githubusercontent.com/70960245/163006210-6fccc1ed-af45-41d6-b04c-ebd453eeeeea.mov

🌈 Testing

Check out this branch locally
Visit http://localhost:4200/combobox/combobox-basic

Closes #138

balinterdi commented 2 years ago

@NullVoxPopuli Heyo, I'm looking to get this PR up-to-date with latest master and eventually merge it, adding Combobox to the list of supported add-ons. Could you approve and run this PR for me, please? Thank you.

NullVoxPopuli commented 2 years ago

@balinterdi yea, I'll keep the tab open -- looks like ci already ran tho!

dmcnamara-eng commented 2 years ago

Closed in favour of https://github.com/GavinJoyce/ember-headlessui/pull/165

GavinJoyce / ember-headlessui