autoComplete.js icon indicating copy to clipboard operation
autoComplete.js copied to clipboard

The “tabSelect” option is not working properly

Open JWo1F opened this issue 1 year ago • 1 comments

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

  1. Go to official example
  2. Enter some text in the search box
  3. Press "tab" button
  4. 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

JWo1F avatar Jan 27 '25 14:01 JWo1F

I would love to take a look at this @JWo1F

hdJerry avatar Oct 09 '25 22:10 hdJerry

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);
                        } 

... `

canarslan12 avatar Jan 04 '26 22:01 canarslan12