Open wingkwong opened 1 month ago
@wingkwong this is happening with Select too.
i am not getting this error
https://github.com/user-attachments/assets/d313696d-1add-4a90-8cbe-386ef1fafe59
@Tejas-Sands It only happens on first load.
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
@wingkwong which files in repo contain the above mentioned code ?
The one I posted is from react-spectrum side.
NextUI Version
canary
Describe the bug
There're two observations here.
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
Your Example Website or App
Go to Storybook - Autocomplete - Default
Steps to Reproduce the Bug or Issue
Tiger
, the list is closed due to an unexpected scrollingExpected behavior
The list shouldn't be closed when using keyboard navigation
Screenshots or Videos
issue3468-demo.webm
Operating System Version
macOS
Browser
Chrome