Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Combobox]: input doesn't update when value is controlled externally #229

Closed
lunafoxx opened this issue Jun 28, 2023 · 2 comments
Closed

Comments

@lunafoxx
Copy link

Describe the bug
I'm using a combobox with multiple mode disabled. When you click on an option in the dropdown menu, the input text is set to the text of the selected option. However setting the value of the combobox through any other method than clicking the dropdown does not update the text input (in my case I'm using a button). This provides the user with no visual confirmation that the value has changed.

To Reproduce

  1. Create a combobox with options ["one", "two", "three"]
  2. Control the value of the combobox with a signal
  3. Create a button the clear or set the combobox value
  4. The button clears or sets the value, but no change is made to the text input

Expected behavior
I would expect controlling the value prop externally to automatically change the input value when the value prop changes

Screenshots
My combobox:
Screenshot_1

Pressing the + adds a new item to the list and selects it, but the input is unchanged:
Screenshot_5

Clicking the item correctly updates the input:
Screenshot_3

Clicking the X correctly removes the selected item, but the input is not cleared:
Screenshot_4

Environment:
Windows Firefox 114.0.2

Additional context
This can be worked around by adding a ref to the Combobox.Input element and manually setting the input value. However, it feels slightly strange that this would be required when the default selection method handles this automatically.

@lunafoxx lunafoxx changed the title Combobox input doesn't update when value is controlled externally [Combobox]: input doesn't update when value is controlled externally Jun 28, 2023
@jcmonnin
Copy link

jcmonnin commented Aug 23, 2023

When having a controlled value, I see the select being out of sync in 0.10.0. It can be reproduced in the documentation page.

  1. Go to Select Controlled value example
  2. Select Apple
  3. Deselect Apple
  4. Select box still shows Apple, controlled value is empty (eg. it shows Your favorite fruit is: .). This happens most of the time for me, but not always.

Luckly for me I need disallowEmptySelection: true, so that issue is currently not relevant for me (I had to specify this explicitly, since the default value changed in 0.10.0. This is the reason I started to look into this).

@fabien-ml
Copy link
Collaborator

@jcmonnin sorry, i've forgot to mention disallowEmptySelection in the release note.
The bug is fixed and i'm trying to fix 1,2 more before releasing a new version.

The problem was when you deselect an item, the value became undefined and when a Kobalte's component get undefined as value it work as an uncontrolled one. Now when you deselect the value became null which is fine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants