[BUG] - keyboard navigation on autocomplete / select

[wingkwong]

NextUI Version

canary

Describe the bug

There're two observations here.

• the list closes suddenly after reaching the end of visible options (i.e right after max height) and only happen on the first load
• an unexpected scrolling was triggered

For the first one, the close logic was introduced in https://github.com/nextui-org/nextui/pull/3414 so the first behaviour won't exist in production (v2.4.2) but the second one does.

We need to find out why there is a scroll triggered when keyboard navigation reaches the end of visible options.

It is due to listbox with max-height.

maybe related to

    if (manager.focusedKey != null) {
      // Refocus and scroll the focused item into view if it exists within the scrollable region.
      let element = scrollRef.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`) as HTMLElement;
      if (element) {
        // This prevents a flash of focus on the first/last element in the collection, or the collection itself.
        if (!element.contains(document.activeElement)) {
          focusWithoutScrolling(element);
        }

        let modality = getInteractionModality();
        if (modality === 'keyboard') {
          scrollIntoViewport(element, {containingElement: ref.current});
        }
      }
    }

Your Example Website or App

Go to Storybook - Autocomplete - Default

Steps to Reproduce the Bug or Issue

1. Go to autocomplete storybook - Default
2. click to open autocomplete
3. Keep pressing ArrowDown key to navigation
4. After Tiger, the list is closed due to an unexpected scrolling

Expected behavior

The list shouldn't be closed when using keyboard navigation

Screenshots or Videos

issue3468-demo.webm

Operating System Version

macOS

Browser

Chrome

[linear[bot]]

ENG-1138 [BUG] - keyboard navigation on autocomplete

[awesome-pro]

@wingkwong this is happening with Select too.

[Tejas-Sands]

i am not getting this error

https://github.com/user-attachments/assets/d313696d-1add-4a90-8cbe-386ef1fafe59

[wingkwong]

@Tejas-Sands It only happens on first load.

[ShrinidhiUpadhyaya]

In my initial analysis, i found out that, it is happening because of the key data-key inside optionProps from useOption provided by @react-aria/listbox .

Please check the below code in use-listbox-item.ts

  const {isFocused, isSelected, optionProps, labelProps, descriptionProps} = useOption(
    {
      key,
      isDisabled,
      "aria-label": props["aria-label"],
      isVirtualized,
    },
    state,
    domRef,
  );

If you delete the key data-key, then the list does not close and their is no unexpected scrolling, but the side effect of it is that it does not auto-scroll to the items below.

https://github.com/user-attachments/assets/4f7fd640-8046-4359-9a56-2853aa3a2f6e

[awesome-pro]

@wingkwong which files in repo contain the above mentioned code ?

[wingkwong]

The one I posted is from react-spectrum side.