You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
Create a combobox with options ["one", "two", "three"]
Control the value of the combobox with a signal
Create a button the clear or set the combobox value
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:
Pressing the + adds a new item to the list and selects it, but the input is unchanged:
Clicking the item correctly updates the input:
Clicking the X correctly removes the selected item, but the input is not cleared:
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.
The text was updated successfully, but these errors were encountered:
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
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).
@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.
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
["one", "two", "three"]
Expected behavior
I would expect controlling the
value
prop externally to automatically change the input value when thevalue
prop changesScreenshots
My combobox:
Pressing the + adds a new item to the list and selects it, but the input is unchanged:
Clicking the item correctly updates the input:
Clicking the X correctly removes the selected item, but the input is not cleared:
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.The text was updated successfully, but these errors were encountered: