Combobox component

[NoelOConnell]

Fixes #63
A port of the Combobox component from HeadlessUI
This follows the same implementation as the other components already here to keep it consistent
Added all the tests from the React version of the Comobobox and ported it to Svelte
Added a new documentation page following the style of the other components and used the text from the HeadlessUI version
There is still a few failing tests that need some investigation that I hope to have time to look at later this week.

This branch is based of #121 since it also uses the new <Hidden> component so it can be used with forms.
This is still using the on:change pattern instead of bind:value maybe we could get this is a 1.x release since it's not a breaking change.

Happy for any feedback

Example in the docs

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
svelte-headlessui	❌ Failed (Inspect)			Jan 25, 2023 at 4:15PM (UTC)

[rgossiaux]

Just wanted to pop in quickly to say that this is amazing, thank you!

I spent so much time on this project this past winter/spring that I burned out on it and needed to put it down and focus on other things in my life. But recently I've felt a little more energized again and I'm hoping to be able to dedicate some more time again in the coming days and weeks. Your PR is hugely appreciated since I've felt especially guilty about never porting Combobox. I'll take a look at this (and the other outstanding PRs) soon.

[NoelOConnell]

No problem! I fully understand. This was only 1 component and it felt like a chore towards the end so I can only imagine the amount of effort and work you have put into it. It's great to have a Svelte port of Headless UI at this level of quality.

I've tidied up some of the changes and fixed the main issues with the tests.
Nearly all the tests are now passing for the Combobox

All tests are now passing. The tests are a direct port of the React version of tests.
Tests: 0 failed, 2 skipped, 142 passed, 144 total 🎉

[sserdyuk]

@rgossiaux Could you please merge this in and release an update?

[sharmapukar217]

Isn't this ready to be used? Seems that all checks have been passed, but isn't merged yet 🤔
@rgossiaux

[rgossiaux]

Yes, I'm on vacation for another week but I hope to get through this PR soon. Thanks for your patience, I know this is a super important update for the library.

[pukar-007]

Yes, I'm on vacation for another week but I hope to get through this PR soon. Thanks for your patience, I know this is a super important update for the library.

sorry for disturbing @rgossiaux but its more than a week 😩

[midnightmonster]

FWIW, I am using it already. I'll be glad to switch back to the main repo when this is merged, though.

[ptsimard]

Echoing @midnightmonster, I am using it via my own fork. Works great!

[sharmapukar217]

@NoelOConnell, using your fork with sveltekit shows following error:
Failed to resolve entry for package "@rgossiaux/svelte-headlessui". The package may have incorrect main/module/exports specified in its package.json.

[Pawel-Zygmunt]

@rgossiaux so we all are hoping it will be merged soon :)

[Pawel-Zygmunt]

@midnightmonster, @ptsimard @NoelOConnell can anyone of you guys would help me to use this fork in my project?

[Pawel-Zygmunt]

@NoelOConnell, using your fork with sveltekit shows following error: Failed to resolve entry for package "@rgossiaux/svelte-headlessui". The package may have incorrect main/module/exports specified in its package.json.

Yeah. I have the same issue, but I think its not about this perticular for. Try to fork master branch from main repo. The same issue. We are missing some step during installation

[NoelOConnell]

@Pawel-Zygmunt I've created a temporary package on npm which includes this PR.

https://www.npmjs.com/package/svelte-headlessui-combobox-temporary

You can use that package in the meantime until this PR is merged.

You can use the docs from this PR to see how to use the Comobobox

https://svelte-headlessui-git-fork-noeloconnell-combob-d68663-rgossiaux.vercel.app/docs/combobox

[Pawel-Zygmunt]

@NoelOConnell I was just about to create it on my own - found out how. Nevertheless - thanks a lot!

[Pawel-Zygmunt]

@NoelOConnell in example with persons as list of object I believe value passed to ComboboxOption should be passed as id. value={person.id}, not like this is now value={person}. I copy paste this example to TS project ad get errors.

[Pawel-Zygmunt]

Seems to me that value is not typed properly: (property) value: string | number | string[] | null | undefined it can only take these type, whereas there is need to pass full object.

[NoelOConnell]

@Pawel-Zygmunt I've made changes to the ComoboboxOption value type. It should allow objects now.

HeadlessUI has released some updates to the Comobobox component since I started this PR.
The latest commit includes these:
Ensure shift+home and shift+end works as expected in the Combobox.Input component #2024
Add null as a valid type for Combobox (#2064, #2067)

[Murtatrxx]

Wow looks like this awesome repository is maintained poorly. Why is it so hard to release one feature?

[toothpaste011]

I'm having an issue where I'm trying to pass the ID value in an Object under the ComboboxOption somewhat like value={person.id} using the example as a template but whenever I try to apply displayValue={(person) => person.name} under ComboboxInput, the value doesn't get reflected properly on the input box and it stays blank. The value as ID gets passed just fine on form submission but it'll be absolutely confusing for the end user as to what's happening. How would you suggest I work around this issue? I'm completely new to this so I apologize if this seems like a simple issue.

[NoelOConnell]

I'm having an issue where I'm trying to pass the ID value in an Object under the ComboboxOption somewhat like value={person.id} using the example as a template but whenever I try to apply displayValue={(person) => person.name} under ComboboxInput, the value doesn't get reflected properly on the input box and it stays blank. The value as ID gets passed just fine on form submission but it'll be absolutely confusing for the end user as to what's happening. How would you suggest I work around this issue? I'm completely new to this so I apologize if this seems like a simple issue.

The displayValue function takes the value passed to the ComboboxOption.
You will need to change your code to pass the full object eg value={person} then in displayValue you have the full object.

[dmvvilela]

Any updates on this? @rgossiaux

[Neo-Ciber94]

Waiting for this

[ricochenft]

Would be awesome if this PR can be worked on. I've been waiting for this to build a custom auto-complete component.

[atuttle]

Perhaps @rgossiaux could add some additional contributors? I've spent a good amount of time this week building up a set of components / design system for my company using this repo and would hate for it to just be stagnant and force me to switch to something else.

[dmvvilela]

Perhaps @rgossiaux could add some additional contributors? I've spent a good amount of time this week building up a set of components / design system for my company using this repo and would hate for it to just be stagnant and force me to switch to something else.

Use this one: https://github.com/CaptainCodeman/svelte-headlessui

[Loizzus]

I have created a new fork for us to share so we can fix these issues: https://github.com/PyongyangOpenSource/svelte-headlessui