Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug]: `<Popover>` component does not use forwardRef

See original GitHub issue

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

1.3.0

What browser are you using?

Chrome

Reproduction repository

N/A

Describe your issue

(Censored to protect confidentiality)

It looks like Popover.Button and friends use forwardRef, but not Popover itself.

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:7

Top GitHub Comments

2reactions

RobinMalfaitcommented, Aug 23, 2021

Oops, I was wrong while responding to this issue. Most of the time we have the Root element render a Fragment just so that we can setup context providers and I assumed the same here.

It’s true that all components have an as prop. I’m going to think about whether there is a downside of using forwardRef everywhere 🤔

1reaction

RobinMalfaitcommented, Feb 24, 2022

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

You can already try it using:

npm install @headlessui/react@insiders or yarn add @headlessui/react@insiders.

Top Results From Across the Web

Popover is not appearing if anchor component does ... - GitHub

A possible workaround is to wrap anchor element with a container in Popover itself. I don't whether doing this will break any styles...

react-aria and Typescript building a popover component error ...

I have been using react-aria to build a popover in Storybook. This popover is built in two components, the first one is the...

Forwarding Refs - React

Ref forwarding is an opt-in feature that lets some components take a ref they receive, and pass it further down (in other words,...

react-tiny-popover - npm

A simple and highly customizable popover react higher order component with no other dependencies! Typescript friendly.

React Tooltip component - Material UI - MUI

The Tooltip has 12 placement choices. They don't have directional arrows; instead, they rely on motion emanating from the source to convey direction....