The “tabSelect” option is not working properly
System Information
- Browser type and version: Arc Version 1.79.0 (57949) Chromium Engine Version 132.0.6834.111
- OS type and version: MacOS 15.1.1 (24B91)
Describe the bug
tabSelect doesn't work even in the example. Selecting items with up/down arrows works correctly.
To Reproduce
- Go to official example
- Enter some text in the search box
- Press "tab" button
- Here is the issue
Expected behavior
You are prompted to select the first item in the list, pressing tab again moves the selection to the second item. Pressing enter selects an item and triggers the selection event.
Screenshots or GIF's
https://github.com/user-attachments/assets/cd2b9f56-5690-4567-aec4-c7c47223254c
Additional context (optional)
None
I would love to take a look at this @JWo1F
tabSelect is working as intended but it does not what I wanted. Intended/current behaviour: user select one item with up or down than click tab, it will be same as selecting it. Excepted behaviour: user does not select any item, directly clicks tab, it will select first item. This can be done with settings like this: ` events: { input: { selection: (event) => { handleSelection(event.detail.selection.value); }, keydown: (event) => { switch (event.keyCode) { // Down/Up arrow case 40: case 38: event.preventDefault(); // Move cursor based on pressed key event.keyCode === 40 ? autoCompleteInstance.next() : autoCompleteInstance.previous();
break;
case 9: // Tab key
case 13: // Enter key
if (autoCompleteInstance.cursor && autoCompleteInstance.cursor !== -1) {
const selectedItem = autoCompleteInstance.data.store[autoCompleteInstance.cursor];
if (selectedItem) {
event.preventDefault();
handleSelection(selectedItem);
return;
}
}
// get first item from buffer if exists
const firstItem = autoCompleteInstance.data.store[0];
if (firstItem) {
handleSelection(firstItem);
}
... `