React Aria Combobox keyboard question #5761

p1pah · 2024-01-27T16:56:47Z

p1pah
Jan 27, 2024

Hello I am attempting to infinitely scroll the React Aria Combobox with my keyboard but am hitting some snags when I get to the bottom of the list. It feels as though the items don't get recomputed, e.g. can't get hovered on. It works great when I just normally scroll and select an option with my mouse though! Any help or suggestions on going a different route would be greatly appreciated :D

` const rowVirtualizer = useVirtualizer({
count: filteredOptions.length,
getScrollElement: () => popoverRef.current ?? null,
estimateSize: () => 100,
})

return (
  <RACCombo
    className="w-96"
    items={rowVirtualizer.getVirtualItems()}
    // SPENT WAY TO MUCH TIME OF FINDING THIS BUG https://github.com/adobe/react-spectrum/issues/5133
    //@ts-ignore
    allowsEmptyCollection
  onKeyDown={()=> 
  // I WANT TO DO SOMETHING here
  }
  >
    <Label>hehe</Label>
    <Group className="flex rounded-lg bg-white bg-opacity-90 shadow-md ring-1 ring-black/10 transition focus-within:bg-opacity-100 focus-visible:ring-2 focus-visible:ring-black">
      <Input className="w-full flex-1 border-none bg-transparent px-3 py-2 text-base leading-5 text-gray-900 outline-none" />
      <Button className="pressed:bg-sky-100 flex items-center rounded-r-lg border-0 border-l border-solid border-l-sky-200 bg-transparent px-3 text-gray-700 transition">
        ▼
      </Button>
    </Group>
    <Popover
      ref={setReference}
      className="entering:animate-in entering:fade-in exiting:animate-out exiting:fade-out z-40    w-[--trigger-width]  overflow-y-auto overflow-x-hidden rounded-lg border-[1px] border-gray-200 bg-white  text-base shadow-lg ring-1 ring-black/5"
    >
      <div
        className="relative w-full"
        style={{
          height: rowVirtualizer.getTotalSize(),
        }}
      >
        <ListBox
          className="absolute left-0 top-0 w-full"
          style={{
            transform: `translateY(${rowVirtualizer.getVirtualItems()[0]?.start ?? 0}px)`,
          }}
        >
          {(item: VirtualItem) => {
            return (
              <ListBoxItem
                key={item.key}
                id={item.key}
                data-index={item.index}
                ref={rowVirtualizer.measureElement}
              >
                {listBoxItem => {
                  return <div>TESTING {item.index}</div>
                }}
              </ListBoxItem>
            )
          }}
        </ListBox>
      </div>
      {/* )} */}
    </Popover>
  </RACCombo>`

Answered by p1pah

Jan 29, 2024

Thank you @LFDanLu for making me whip up a reproduction. I could not break it in codesandbox. Came to find out that it was headlessui
appending an overflow:hidden to the <html> tag. I spent all weekend trying to figure out this and now I am confident in my companies decision to officially get rid of headlessui. Partly because we want to move to react-aria-components, but if I am being honest it is because of the time I wasted on this. Thanks for the library and the help! :D

View full answer

LFDanLu · 2024-01-29T20:56:05Z

LFDanLu
Jan 29, 2024
Collaborator

Could you provide a sandbox or repro that I could look at? Potentially an issue with the items being cached in the collection or maybe just the hover state being stale but hard to say without digging myself. We haven't yet explored virtualization on our side with RAC but will be doing so in the near future

0 replies

p1pah · 2024-01-29T23:42:50Z

p1pah
Jan 29, 2024
Author

Thank you @LFDanLu for making me whip up a reproduction. I could not break it in codesandbox. Came to find out that it was headlessui
appending an overflow:hidden to the <html> tag. I spent all weekend trying to figure out this and now I am confident in my companies decision to officially get rid of headlessui. Partly because we want to move to react-aria-components, but if I am being honest it is because of the time I wasted on this. Thanks for the library and the help! :D

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

React Aria Combobox keyboard question #5761

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

React Aria Combobox keyboard question #5761

Uh oh!

p1pah Jan 27, 2024

Replies: 2 comments

Uh oh!

Uh oh!

LFDanLu Jan 29, 2024 Collaborator

Uh oh!

Uh oh!

p1pah Jan 29, 2024 Author

p1pah
Jan 27, 2024

LFDanLu
Jan 29, 2024
Collaborator

p1pah
Jan 29, 2024
Author