search

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

React Popover v2: warnings when used inside `p`-element #3319

Open jmyrland opened 1 week ago

jmyrland commented 1 week ago

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

2.1.0

What browser are you using?

Chrome

Reproduction URL

See the sandbox

Describe your issue

When using Popover nested inside a p-element, the following warning is logged in the console:

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.

As you can see in the sandbox, all of the popover components use as="span", but there is an empty div rendered within the Popover causing this issue: image

Is this empty div-element critical for the popover to work, or is there a way to opt out from this element?