search

chakra-ui / ark

Ark UI is a headless UI library with over 45+ components designed to build scalable Design Systems that works for a wide range of JS frameworks.
https://ark-ui.com
MIT License
3.82k stars 112 forks source link

Combobox pressing enter without selecting an option leaves text in the input #2930

Closed marcinzarycki closed 1 month ago

marcinzarycki commented 1 month ago

Description

When I press Enter after typing in the Combobox but without using the arrow keys to select an option, the typed in text remains in the Combobox input even though no value is set/selected, even after you tab out or click out of the Combobox. I expected the input to be cleared once focus left the Combobox if no option was selected.

Link to Reproduction (or Detailed Explanation)

https://ark-ui.com/react/docs/components/combobox

Steps to Reproduce

Scenario 1:

  1. Go to https://ark-ui.com/react/docs/components/combobox
  2. Click on the Combobox in the demo
  3. Type in text matching a real option, such as "React"
  4. Press Enter (which will close the listbox)
  5. Press Tab or click outside the field (the text of "React" is still in the field, but the value is not selected)
  6. Click the trigger to open the listbox (the text remains in the input, but there is no checkmark next to the option, which shows that the value was not selected)
  7. Click outside the field (this will clear the input, further proving the value was never set)

Scenario 2:

  1. Go to https://ark-ui.com/react/docs/components/combobox
  2. Click on the Combobox in the demo
  3. Type in text that does NOT match a real option, such as "asdf"
  4. Press Enter (which will close the listbox but leave the text in the field)
  5. Press Tab or click outside the field (the text of "asdf" is still in the field, but there is no value matching it, so no value was selected)

Ark UI Version

4.0.0

Framework

Browser

Google Chrome Version 129.0.6668.70

Additional Information

No response

segunadebayo commented 1 month ago

Thanks for reporting this issue @marcinzarycki.

Scenario 1: Just because the text typed matches an option doesn't make it "selected" in that sense. Only an actual selection event (keyboard or pointer) makes an option selected.

Scenario 2: That's definitely a bug that needs to be fixed.

segunadebayo commented 1 month ago

I just pushed a fix for this in Zag.js. We'll release an update shortly.

If the issue persists after upgrading, I'll re-open it.