Bug: Popover API not supported

[Semigradsky]

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.

[Dreadfullove]

Sure

[Semigradsky]

Related DT discussions:

• [@types/react] needs support for Popover API DefinitelyTyped/DefinitelyTyped#66550
• [@types/react] DefinitelyTyped/DefinitelyTyped#66963

[konstantinblaesi]

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 ?

[joshwcomeau]

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! ❤️

[eps1lon]

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

[jfbrennan]

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.

[jfbrennan]

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

[acusti]

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

[email protected] [email protected]

[dominictobias]

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

[peteruithoven]

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

[teamteak]

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