Combobox - Cannot reset controlled combobox

[sharizard]

Description of the bug

I extended the controlled combobox example (codeexample from here) with a new button: Nullstill.

The button is quite simple, and sets the value of the combobox to an empty array.

      <Button
        onClick={() => {
          setValue([])
        }}
        style={{ marginBottom: '1rem' }}
      >
        Nullstill
      </Button>

I expect the combobox to be reset when clicking on the button, just as when the user clicks on the clear button.

However, the combobox does not get fully reset. The options are gone, but the value is still present in the input field.

See the video for an example.

https://github.com/user-attachments/assets/fe53fc0d-f2ca-4ded-8857-aa5e337a7af9

Steps To Reproduce

1. Extend the "Controlled combobox storybook example" with a new button: Reset
2. Update value to an empty array in Reset buttons onClick handler

Additional Information

No response

[Barsnes]

Hi, value only changes the selected item. You will have to clear the input as well, as this is not done internally when value changes, but maybe it should 🤔

[sharizard]

When you say clear the input, do you mean the prop inputValue? I tried to set inputValue to both undefined and an empty string, but could not make it work.

[Barsnes]

When you say clear the input, do you mean the prop inputValue? I tried that too, but could not make it work..

yes, this would need to be updated as well. Will update this issue if we decide to clear the input when value changes

[sharizard]

Here's a codesandbox: https://codesandbox.io/p/sandbox/react-18-forked-7m9xrk?file=%2Fsrc%2FApp.tsx&workspaceId=70724fe5-4cd5-4207-becc-a37da16e5557

Am I doing something wrong? I've tried to set inputValue to undefined or an empty string, but the issue still persists.

[Barsnes]

Here's a codesandbox: https://codesandbox.io/p/sandbox/react-18-forked-7m9xrk?file=%2Fsrc%2FApp.tsx&workspaceId=70724fe5-4cd5-4207-becc-a37da16e5557

Am I doing something wrong? I've tried to set inputValue to undefined or an empty string, but the issue still persists.

No this looks correct, but I have identified a problem with how we handle a controlled input in the combobox. I'll have a look at it more tomorrow, thanks for finding this!

[sharizard]

Thanks!

[Barsnes]

Hi, I have created a PR where the combobox now correctly sends all change events, and adheres to what you send in as inputValue. Please have a look at this story: https://storybook-pr-2267.dev.designsystemet.no/?path=/story/komponenter-combobox--controlled

[Barsnes]

This has now been merged to the next branch, and you will be able to test this in the next prerelease

[olemartinorg]

The bug seems to still be present in the latest release. See sandbox here: https://codesandbox.io/p/sandbox/react-18-forked-5p34dm

[Barsnes]

We will take a look at this again when we take a bigger look at the combobox