Programmatically/automatically closing ListboxPopover

[okbytes]

I have a table with Listboxes in each row. The table has a max-height and will scroll if the rows overflow. The Listbox's use of portal works wonderfully for this use case.

The only small barb is if the Listbox is open, the portal'd menu will follow the ListboxButton as it gets clipped from scrolling. Being able to close the Listbox menu or hide it somehow when the Listbox button is not visible would be a huge improvement.

For comparison, popper.js has something that detects if the reference element is hidden and exposes an attribute in the HTML. I tried to implement a different Listbox with Popper. It hide the menu when the button was hidden but was difficult to configure to portal correctly. In this case, I couldn't figure out how to make it work like I did with Reach's Listbox.

[indiesquidge]

@01brett thanks for opening this discussion topic. To get a better idea of what you're trying to accomplish, it would be helpful if you had some kind of demo or visualization. Are you able to share a CodeSandbox of your popper.js example or a gif/mp4 of what you're aiming to do?

Being able to close the Listbox menu or hide it somehow when the Listbox button is not visible would be a huge improvement.

Have you tried using IntersectionObserver (or some library built on top of this Web API) to ​render your Listbox based on some visibility conditional? Something like this (note: pseudo code)

import { useInView } from 'react-intersection-observer';

const MyListbox = () => {
  const [listboxButton, listboxButtonInView] = useInView();

  return (
    <ListboxInput>
      <ListboxButton ref={listboxButton} />
      {listboxButtonInView ? (
        <ListboxPopover>
          <ListboxList>
            <ListboxOption value="default">Choose a taco</ListboxOption>
            <ListboxOption value="asada">Carne Asada</ListboxOption>
          </ListboxList>
        </ListboxPopover>
      ) : null}
    </ListboxInput>
  );
};

[okbytes]

Here is an example of the current problem:
https://user-images.githubusercontent.com/6867344/140066763-6c0353fb-7c08-40e7-86d2-6a50292b2ab7.mov

I tried this hook, but was meaning to look at the react pkg you mentioned. I had trouble getting this to work in our build (it worked locally). However, it still hides the menu rather than properly closes the menu. This was the problem with Popper as well (it only gives an attribute to key on for hiding).

Ideally, when the button is no longer in view, it would give up its focus and revert back to the idle state. I will make a todo to try a CodeSandbox when I have some time this week.