react
react copied to clipboard
facebook
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
truefor a non-boolean attributepopover. -
popoverattribute wasn't added todiv
It works if I change boolean atribute popover to popover="yes".
Also ESLint fails on unknown popover, popovertarget, popovertargetaction attributes.
Related DT discussions:
- https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/66550
- https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/66963
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 https://github.com/facebook/react/pull/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 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]
Why isn't this added to 18 too? Popover is available in all modern browsers and part of the standard
Any news on this? Would be really helpful to use popover. Does anyone knows about a walkaround?
@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.
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.
