Bug: Popover API not supported

About this API: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

React version: any

Steps To Reproduce

      <div popover id="my-popover">
        Greetings, one and all!
      </div>
      <button popovertarget="my-popover" popovertargetaction="show">
        Open Popover
      </button>
      <input
        type="button"
        popovertarget="my-popover"
        popovertargetaction="hide"
        value="Close Popover"
      />

Link to code example: https://codesandbox.io/s/popover-api-8x5nfq?file=/src/App.js

The current behavior

Error in console:

Warning: Received true for a non-boolean attribute popover.
popover attribute wasn't added to div

It works if I change boolean atribute popover to popover="yes".

Also ESLint fails on unknown popover, popovertarget, popovertargetaction attributes.

Sure

Related DT discussions:

Login to Svelte REPL is broken if I enable this extension . The authenticating happens in a popup but you can also use it via https://svelte.dev/auth/login . Dev console logs some warnings related to popover API. Is svelte REPL using this API and react dev tools breaking this somehow ?

Hey folks! Any news on this?

A reliable polyfill is available for the Popover API, and some companies (eg. Github) are already using it in production. I tried using it in my app and spent 10 minutes trying to understand what I was doing wrong, before realizing that React itself didn't support it. I think this sort of confusion will only get more common as this API gets more attention.

Just wanted to share this experience since I know it can be hard to gauge the importance of different issues. Appreciate the work y'all do! ❤️

Just need to bring this up internally so that we're aligned on prop naming. If anybody wants to test it out, you can install

react@https://react-builds.vercel.app/api/prs/27981/packages/react react-dom@https://react-builds.vercel.app/api/prs/27981/packages/react-dom

to test #27981

Tried to use popover today. Doesn't work. Have to explicitly set a value despite the spec defining "auto" as default.

Honest question: What is the React team's plan to permanently fix this so developers can trust React will always comply with web standards?

Popover is another example among many throughout the years where React's non-compliance creates friction or outright fails to work with web standards. React has effectively recreated the situation we had with IE where one player with the biggest marketshare slows the whole community down. This is intolerable and not sustainable.

Popover's toggle and beforetoggle events do not appear to work either:

<button popovertarget="myPopover">Toggle</button>
<div onToggle=${handlePopoverToggle} popover="auto" id="myPopover">Popover stuff</div> <-- Does not work

@jfbrennan

@jfbrennan if you use the latest react RC, all popover API attributes and event handlers are available and working. i'm using

react@19.0.0-rc-4c2e457c7c-20240522 react-dom@19.0.0-rc-4c2e457c7c-20240522

Why isn't this added to 18 too? Popover is available in all modern browsers and part of the standard

Is there any change the Popover API can be backported to v18?

Considering React 19 is delayed, can we not get this in React 18?

Any news on this? Would be really helpful to use popover. Does anyone knows about a walkaround?

@bermann

@bermann you can use the popover, popovertarget, and popovertargetaction attributes in React 18, though you will need to provide the default auto value to get it to work properly. however, if you want to add a beforetoggle or toggle event listener, you will need to use a ref to add and cleanup the listener manually.

bonkers

It is a shame that this only works if you explicitly use popover="auto" or popover="manual". auto is the default value. In HTML popover attribute works alone without needing to explicitly set it to auto.

Will React18 also support popover api?

Navigation Menu

Repository navigation

Bug: Popover API not supported #27479

Steps To Reproduce

The current behavior

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Bug: Popover API not supported #27479

Description

Steps To Reproduce

The current behavior

Activity

Dreadfullove commented on Oct 8, 2023

Semigradsky commented on Oct 18, 2023

konstantinblaesi commented on Oct 26, 2023

joshwcomeau commented on Apr 10, 2024

eps1lon commented on Apr 11, 2024

jfbrennan commented on May 17, 2024

jfbrennan commented on May 17, 2024

acusti commented on May 25, 2024

dominictobias-bullish commented on Jun 27, 2024

peteruithoven commented on Jul 27, 2024

teamteak commented on Oct 23, 2024

bermann commented on Nov 28, 2024

acusti commented on Nov 28, 2024

k-sav commented on Jan 15, 2025

o-t-w commented on Jan 17, 2025

tounsoo commented on Feb 18, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions