Passing the open flag from the Listbox component

[piotr-ilder]

Hi,
I'm trying to disable scrolling while a Listbox component instance is expanded. Here's my code:

import { Fragment, useCallback, useEffect, useState } from 'react';
import { Listbox } from '@headlessui/react';

export const Component = () => {
  const [isOpen, setIsOpen] = useState(false);
  const setIsMenuOpen = useCallback((isMenuOpen: boolean) => {
    setIsOpen(isMenuOpen);
  }, []);

  useEffect(() => {
    if (isOpen) {
      window.document.body.style.overflow = 'hidden';
    } else {
      window.document.body.style.overflow = 'auto';
    }

    return () => {
      window.document.body.style.overflow = 'auto';
    };
  }, [isOpen]);

  return (
    <Listbox name={field.name} value={field.value} onChange={setValue} multiple>
      {({ open }) => {
        setIsMenuOpen(open);

        return (
          <>
            <Listbox.Button>
              {field.value}            
            </Listbox.Button>
            <Listbox.Options>
              {OPTIONS.map((option) => (
                <Listbox.Option key={option.key} value={option.key} as={Fragment}>
                  {({ selected }) => {
                    return (
                      <li>
                        {option.label}
                        {selected ? <CheckIcon /> : null}
                      </li>
                    );
                  }}
                </Listbox.Option>
              ))}
            </Listbox.Options>
          </>
        );
      }}
    </Listbox>
  );
};

But updating a state from inside of return of a component is a bad idea. Is there any other way to discover whether any Listbox component is opened?

[IgorDePaula]

I hame the same problem. On compile with typescript none this components render on screen. I got error by use hooks in classes, but is in functional components.