github / combobox-nav Goto Github PK

A quick report that v2.3.0 and the new scrollIntoView broke the UX of @github/text-expander for me. It would push the expanded <ul> to the top of the screen. After spending a few hours debugging what's the core of the issue, I noticed that the undesirable UX happens after the combobox-nav dependency of text-expander is upgraded to v2.3.0.

If someone else is facing this issue, my solution was to fix combobox-nav to v2.2.0 through "resolutions" section of package.json.

In example click by mouse on list item not fire commit event.
That's because blur event executes before click event. Solution: change click listener to mousedown listener.

Run

#75 replaced scrolling logic with Element.scrollIntoView. However, this causes the entire page to scroll when the combobox is contained with a position: sticky element.

Here is a simple reproduction:
https://stackblitz.com/edit/js-ktdbvw

Observe that when you navigate through the combobox options with the Up/Down Arrow keys, the entire page scrolls towards the bottom.

Tested in Chrome and Safari.

When implementing a combobox with automatic selection, the current behavior to clear selection on every non-functional keypress causes the UI to flicker.

Here's an example of this behavior.

Can we add a configuration param to indicate that a given instance of Combobox has automatic selection and should not be cleared on keypress?

The CI test suite intermittently fails on MacOS due to what looks like a race condition:

npm ERR! code 1
npm ERR! path /Users/runner/work/combobox-nav/combobox-nav/node_modules/chromium
npm ERR! command failed
npm ERR! command sh -c node install.js
npm ERR! Step 1. Retrieving Chromium revision number
npm ERR! Step 2. Downloading Chromium revision 1025666
npm ERR! /Users/runner/work/combobox-nav/combobox-nav/node_modules/p-cancelable/index.js:48
npm ERR! 					throw new Error('The `onCancel` handler was attached after the promise settled.');
npm ERR! 					      ^
npm ERR! 
npm ERR! Error: The `onCancel` handler was attached after the promise settled.
npm ERR!     at onCancel (/Users/runner/work/combobox-nav/combobox-nav/node_modules/p-cancelable/index.js:48:12)
npm ERR!     at makeRequest (/Users/runner/work/combobox-nav/combobox-nav/node_modules/got/dist/source/as-promise/index.js:38:13)
npm ERR!     at Request.<anonymous> (/Users/runner/work/combobox-nav/combobox-nav/node_modules/got/dist/source/as-promise/index.js:143:17)
npm ERR!     at Object.onceWrapper (node:events:642:26)
npm ERR!     at Request.emit (node:events:527:28)
npm ERR!     at Timeout.retry (/Users/runner/work/combobox-nav/combobox-nav/node_modules/got/dist/source/core/index.js:1278:30)
npm ERR!     at listOnTimeout (node:internal/timers:55[9](https://github.com/github/combobox-nav/runs/7410232560?check_suite_focus=true#step:4:10):17)
npm ERR!     at processTimers (node:internal/timers:502:7)
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/runner/.npm/_logs/2022-07-19T[13](https://github.com/github/combobox-nav/runs/7410232560?check_suite_focus=true#step:4:14)_32_24_7[14](https://github.com/github/combobox-nav/runs/7410232560?check_suite_focus=true#step:4:15)Z-debug-0.log

This doesn't happen on Ubuntu/Windows.

In https://github.com/github/combobox-nav/blob/master/src/index.ts#L130, a keydown event for the Ctrl key will fall to the default case, clearing the selection. This always makes Ctrl+P and Ctrl+N start at the beginning.

I don't think the selection should be cleared in a keydown handler. Perhaps an input handler would be more appropriate for that.

Hi, I noticed the example isn't working. When I focus the input field this error message pops up in the console:

Uncaught TypeError: comboboxNav.stop is not a function
    at HTMLInputElement.toggleList ((index):33)

This happens on Chrome/Firefox/Opera/Safari OSX.

Should the <ul>...</ul> be hidden when a user hits the esc key (source: w3c.org keys-ui)