tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.02k stars 1.03k forks source link

Popover using anchor prop in PopoverPanel hangs unit test #3339

Open restrin-extensis opened 5 days ago

restrin-extensis commented 5 days ago

What package within Headless UI are you using? @headlessui/react

What version of that package are you using? 2.1

Adding this unit test to popover.test.tsx reproduces the problem

describe('Popover', () => {
    it(
      'should open panel with anchor prop',
      suppressConsoleLogs(async () => {
        render(
          <Popover>
            <PopoverButton>Trigger</PopoverButton>
            <PopoverPanel anchor="bottom">Panel open</PopoverPanel>
          </Popover>
        )

        assertPopoverButton({
          state: PopoverState.InvisibleUnmounted,
          attributes: { id: 'headlessui-popover-button-1' },
        })
        assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })

        await click(getPopoverButton())

        assertPopoverButton({
          state: PopoverState.Visible,
          attributes: { id: 'headlessui-popover-button-1' },
        })
        assertPopoverPanel({ state: PopoverState.Visible, textContent: 'Panel open' })
      })
    )

The problem seems to be within useFixScrollingPixel while setting the max height which resolves to NaN and this method is infinitely called.

image

maxHeight: "min(var(--anchor-max-height, 100vh), 0px)"