refactor(Combobox): test implementing u-tags / u-datalist

[eirikbacker]

#2610

• Baseline implementation, supporting multiple and onChange, Combobox.Clear and Combobox.Empty
• Not added support for custom filter or external Combobox.Loading, but this will be quite straight forawrd
• Using an internal React context; I tried making a useCombobox hook first, but caused a lot of wiring for the consumer, and potential props-conflics, so found it easier to resolve and hide this complexity by using context.
• Just temporary implemented checked-design as this is a prototype
• Used new Figma sketches: https://www.figma.com/design/V4dzf3m1sapmU048OQnu7L/Arbeidsomr%C3%A5de%3A-Felles-komponenter?node-id=3105-44383&node-type=canvas&t=sQgVWZASPEPSCzLJ-0

[changeset-bot]

⚠️ No Changeset found

Latest commit: c1e24fc

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

Preview deployments for this pull request:

Storybook - 18. Nov 2024 - 16:16

[github-actions]

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	53.69%	3189 / 5939
🔵	Statements	53.69%	3189 / 5939
🔵	Functions	83.72%	180 / 215
🔵	Branches	75.99%	516 / 679

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/react/src/components/form/Combobox/utilities.ts	100%	83.33%	100%	100%
packages/react/src/components/form/Combobox/v2/Combobox.tsx	0%	0%	0%	0%	1-92
packages/react/src/components/form/Combobox/v2/ComboboxChip.tsx	0%	0%	0%	0%	1-18
packages/react/src/components/form/Combobox/v2/ComboboxClear.tsx	0%	0%	0%	0%	1-51
packages/react/src/components/form/Combobox/v2/ComboboxEmpty.tsx	0%	0%	0%	0%	1-20
packages/react/src/components/form/Combobox/v2/ComboboxInput.tsx	0%	0%	0%	0%	1-14
packages/react/src/components/form/Combobox/v2/ComboboxList.tsx	0%	0%	0%	0%	1-22
packages/react/src/components/form/Combobox/v2/ComboboxOption.tsx	0%	0%	0%	0%	1-14

Generated in workflow #973 for commit c1e24fc by the Vitest Coverage Report Action

[Barsnes]

I'll add some comments here, before trying this in another PR:

• When the user types something that matches 1:1 with an option, it should autoselect
• When an option is selected in single mode, all options should show
• Arrow navigation should not loop
• The controlled example for single does not select the option "Mango"
• I can only click the X on the chips, is this intended?
• There is no indication that I am adding a custom option, and it is not added to the list either

A lot of this seems to be out of our hands, and is the reason I am a bit worried about going for a solution that is not made by us - we loose too much control over what happens. I have tried this with the pure component from u-elements as well, and some of the behaviour seems to come from there.
You might have more knowledge about how to fix some of this, but is everything I mentioned doable?

I see this is also not using the popover API, like we talked about. Is this not possible, or did you just not implement it?

I don't see it as a sustainable solution to update u-elements to get behavior we want, but I'll branch out from this and try some things myself.

[eirikbacker]

Thanks for thorough testing @Barsnes 🙌
This was more a proof of concept, so some things are not implemented as you point out ^^ All of the things you mention is doable ☺️

For instance:

• When the user types something that matches 1:1 with an option, it should autoselect
• When an option is selected in single mode, all options should show

What causes a select can be controlled, and what shows is up to us since we can listen both to clicks on options, as well as typing, and overwrite default behavior.

• Arrow navigation should not loop

This is intentional and how both ARIA combobox and native datalist :)

• I can only click the X on the chips, is this intended?

This is also intentional - after user testing, we saw clicking the chip itself caused confusion or margin for error among some users. Therefore, we moved the click-functionality to the ×-only, so that click on the chip it self sets focus and thus makes it also possible to delete by keyboard. Making hover and focus states for the ×-area can help visualize this concept even better :)

• The controlled example for single does not select the option "Mango"

This might actually be a bug - we'll look into it 🙌 🫶

Regarding Popover API: we are actually working on implementing so that datalist uses this when supported by the browser.

[Barsnes]

I wish we documented why we removed looping, but our current implementation used to have it, but was removed: #1340

Some of the answers here is also why we decided to make this ourselves first - we want to implement decisions we make, and not rely on a third party to fix it on their end.
What happens if we find a bug we can't fix? We would not be able to resolve it ourselves, since we rely on a third party library for most of the implementation.

I'll try to do some of the things I mentioned above, since you feel they are doable - but it seems maybe like a lot of hotwiring 🤔

Otherwise great POC, lots of good things here.

[eirikbacker]

If the project is very worried; feel free to copy the source code out of u-elements - most important is to get the user benefits. If a bug is found; you can contribute just like in any other open source project, and fixing the bug will gain more people than DigiDir Designsystem. Your worries are in many ways the same as for the users we ask to use Deisgnsystemet; some control is always lost when depending on something, while gaining something else.

Regarding hotwiring - I can add an example if you want. Default behavior of u-datalist will always comply with the native datalist and combobox specification, so yes; moving away from the standardard will require some more code on our end, but still much less wiring than creating everything from scratch.

Regarding looping; it would be very interesting to hear why this was removed also for us in the u-elements project <3

[mimarz]

• Arrow navigation should not loop

This is intentional and how both ARIA combobox and native datalist :)

Since we are using the actual datalist element now I suggest we follow its native behaviour. Looping can alway be disable or made optional if someone has good arguments for doing so.

• I can only click the X on the chips, is this intended?

This is also intentional - after user testing, we saw clicking the chip itself caused confusion or margin for error among some users. Therefore, we moved the click-functionality to the ×-only, so that click on the chip it self sets focus and thus makes it also possible to delete by keyboard. Making hover and focus states for the ×-area can help visualize this concept even better :)

Should we also do this for our removable Chip? Might be confusing if they look the same but act slightly different.

Regarding Popover API: we are actually working on implementing so that datalist uses this when supported by the browser.

Is this something we from the team can help do? Contribute back and get to know some web components :)

[mimarz]

Some of the answers here is also why we decided to make this ourselves first - we want to implement decisions we make, and not rely on a third party to fix it on their end. What happens if we find a bug we can't fix? We would not be able to resolve it ourselves, since we rely on a third party library for most of the implementation.

I would not worry about using this particular library as we have the primary developer on our team, so its not the same as using for example floating-ui or radix ❤️

I am also sure @eirikbacker is willing to help us if we find any bugs, and beside we should contribute back when possible, not to mention get some experience working with web-components! 😊