Remove space from combobox single select

[lotorvik]

Description

On combobox and single select you have a space between a selected value and the input. This makes sense for multi select where you have multiple chips and want to add more chips. But for single select it looks strange and when I press backspace I expect the space to go away but the whole value gets removed.

This PR suggest to remove the gap between the input and the selected value with single select on combobox. This makes it behave more like native select.

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 45f6fb25c81bd936b2c3d582d3fb5e4301a29156

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[bot]]

Storybook demo / Chromatic

📝 Endringer til review: 3

0dbad54a7 | 91 komponenter | 138 stories

[it-vegard]

My only worry here is that it looks like the selected value is part of the editable text, meaning the user could expect to press backspace to remove only the last character (instead of the entire selected value), or keep extending the value by typing more characters (instead of replacing the selected value). 🤔

[JulianNymark]

recommend waiting a tiny bit (maybe less than 24 hours) before merging this, since the rewrite for combobox css (new tokens) is 99% done. Maybe do this in the same rewrite PR 🤔 (if we decide to go with the change).

[lotorvik]

I see your point @it-vegard . But with the space there I expect the whitespace to go away and the whole text gets removed, so I don't feel this is worse. But you might be correct that this should be solved diffrently.

I checked with a couple of other searchable selects how they solved it.

• The popular React Select places the cursor in front of the text, but totally ignores the text inside the box. Not sure how much I like this solution, I did not expect the text to go away when I wrote. Only good thing is that you do not need to use backspace before searching again.
• Atlassian select works same as React Select. Did not check if they actually use React Select.
• The design system for Fremtind forsikring (https://jokul.fremtind.no/komponenter/select/) looked like a good solution where they just removes the content when the select get focus, since that is actually what you would like to do. The only problem with this solution is that I did not find a way to actually remove the value from the select...