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]

🦋 Changeset detected

Latest commit: 5d8b1cc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages

Name	Type
@navikt/ds-react	Patch
@navikt/ds-css	Patch
@navikt/aksel-stylelint	Patch
@navikt/aksel	Patch
@navikt/ds-tokens	Patch
@navikt/ds-tailwind	Patch
@navikt/aksel-icons	Patch

Not sure what this means? Click here to learn what changesets are.

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

[github-actions]

Storybook demo / Chromatic

📝 Endringer til review: 1

68d316e2f | 91 komponenter | 135 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...