Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

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

Closed
jmyrland opened this issue Jun 24, 2024 · 1 comment · Fixed by #3362
Closed

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

jmyrland opened this issue Jun 24, 2024 · 1 comment · Fixed by #3362
Assignees
@RobinMalfait

Comments

@jmyrland
Copy link

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?
@RobinMalfait RobinMalfait self-assigned this Jul 4, 2024
RobinMalfait added a commit that referenced this issue Jul 4, 2024
@RobinMalfait
use span as default element for Hidden component
03bc0f9 
This improves the HTML DOM tree if this happens to be used in let's say
a `p` tag where `div` elements are not allowed. The `Hidden` element is
hidden so it doesn't really matter what the underlying element is.

Fixes: #3319
@RobinMalfait RobinMalfait mentioned this issue Jul 4, 2024
Merged
@RobinMalfait
Copy link
Member

This should be fixed by #3362, and will be available in the next release.

You can already try it using:

  • npm install @headlessui/react@insiders.

# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees

@RobinMalfait RobinMalfait

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix outside click in nested portalled Popover components tailwindlabs/headlessui
2 participants
@jmyrland @RobinMalfait