Combobox feature requests

[wolfgang-ch]

• Close selection box with Esc key Currently the selection box can only be closed with the keyboard by pressing the Enter or Tab key. The Enter key do also select the item in the selection box, the Tab key moves to the next field. To just close the selection box without any other action is currently not possible.

• Open selection box when starting the editing in the input field The selection box will display then the filtered items, like the search field in a browser.

• Provide a focus() method for the combobox component When a webpage is loaded, the focus could then be set to the combobox input field.

Sorry with all my feature requests and issues that I've submitted but I try to get a similar user experience like the dojo FilteringSelect widget https://dojotoolkit.org/reference-guide/1.10/dijit/form/FilteringSelect.html

[metonym]

@wolfgang-ch

Close selection box with Esc key

Fixed in version 0.8.2

Open selection box when starting the editing in the input field

Can you elaborate on this request?

By "starting the editing," do you mean on focusing the element? Or actually typing something in the filterable variant?

Provide a focus() method for the combobox component

As of version 0.8.0, you can bind a reference to the input element using the ref prop.

Example in Svelte REPL

<script>
  import { onMount } from "svelte";
  import { ComboBox } from "[email protected]";

  let ref;

  onMount(() => {
    ref.focus();
  })
</script>

<ComboBox bind:ref />

[wolfgang-ch]

It is great that the combobox gets more features :-)

The Example in Svelte REPL is a good starting point to test the combobox.

Instead of writing in words how the editing should be, there is a good dojo example where you can test the editing behavior. Press the Run button in https://dojotoolkit.org/reference-guide/1.10/dijit/form/FilteringSelect.html

[metonym]

@wolfgang-ch Excellent. I'll definitely consider an enhancement where:

• combobox value is autocompleted based on the first matching entry
• pressing "tab" autocompletes the matching value

[theetrain]

It looks like this exact proposal is being tracked here: https://github.com/carbon-design-system/carbon/issues/9260

Let's watch how that turns out so that we can proceed with best practices based on user research.