vaheqelyan/react-awesome-popover

A smart popover component with animation support for ReactJS

react-awesome-popover's Issues

JSFiddle doesn't exist

Accessing the JSFiddle url given as demo returns a 404 error.

Prop `initZindex` was not copied to state

Popover is clipped when using overflow='hidden'

className prop does not work

When sending the className prop into the component, the rendered popover div does not have the className(s) that were passed in. Glancing at the code, it looks like className is always hard coded to "rap-popover-content" without appending any passed-in className prop.

You might want to expose a prop that allows passing arbitrary props into the popover wrapper so the developer user has the freedom to add props that you have not handling explicitly.

npm no matching version for react

When running npm i react-awesome-popover I'm getting the following error:

>npm i react-awesome-popover
npm WARN deprecated [email protected]: please use 0.7.4 or 8.0.0 and above
npm ERR! code ETARGET
npm ERR! notarget No matching version found for react@^6.2.0
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'react-awesome-popover'
npm ERR! notarget

I believe the commit b572c83 was trying to change the react version to 16.2.0 and instead changed it to 6.2.0

Feature request: possibility to close popover programmatically

Hi,

The use case I have is a popover controlling the sorting of a result page.

Clicking in the popover on another sorting preference triggers the fetching and rendering of the newly sorted results (and only that section of the page).

Currently the popover stays open until clicked outside of it. It would make more sense to close the popover after clicking on another sorting option. I do not know a way of doing this with the current api.

Any ideas about how I can achieve this?

Kind regards

don't custom overlay width css? and has a callback at close overlay?

don't custom overlay width css? and has a callback at close overlay?

Popover is clipped when using overflow='hidden'

Suggestion: mention polyfill to readme for IE support

Hi,

I noticed that the popover does not show up in IE, due to the experimental Element.closest() method being used in the codebase.

A simple polyfill overcomes this issue:
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?unknown=polyfill&features=Element.prototype.closest"></script>

This could be mentioned in the readme file.

Kind regards,
Maxime

Random ID incompatible with shapshot testing

Hi,

Earlier this week, we started using your component for popover functionality, and so far we think it is just great. We did stumble into an issue today, however, and that is the fact that the popover component is using random IDs.

When doing snapshot tests with react, most of the times we use shallow rendering, but sometimes we are forced to mount components for snapshot testing. In these scenarios we have discovered that this component makes it impossible to use snapshots in its current form. The snapshots keep changing and failing the tests.

The easiest way to fix this is to use a static ID when running in test mode, like this:

id: process.env.NODE_ENV === 'test' ? 'STATIC_ID' : randomID(10, "a"),

Thoughts?

Cannot add property onClick, object is not extensible

Hi,

I tried to use this library but immediately got this error:

Cannot add property onClick, object is not extensible

After googling I found this on the release notes of React:

The props object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, React.cloneElement should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above. - link

Kind regards

Issues with Server Side Rendering

Because you use "window" in code it's not possible to render Popover on server side without conditionally not renderring it at all. Ideally on server side it would render just trigger element, and then bind popover to it in componentDidMount()

Popover is clipped when using overflow='hidden'

Controlled mode: cannot close popover from overlay click

I would like to use the popover in controlled mode.
Although simple cases (handle state from inside popover) work, there is no idiomatic way to close the popover by clicking on the overlay.

Adding a onOverlayClick would work for me.

I also noted that closing from the overlay in uncontrolled mode does not trigger the onClose event, as you're only toggling the internal state of the popover in this case

Cannot set positionFixed

Would love to have it so that the popover can pop over elements and not move itself to try to fit within its container. This can be achieved by exposing popper.js's positionFixed property to true.

Popover is clipped when inside container using overflow='hidden'

First I would like to say thank you for react awesome popover as it has made it easy to add popovers to our app

The issue that we are currently facing is that we the content of the popover is getting clipped when it's nested inside a container that has overflow set to hidden . I started investigating and came accross this react popover issue which recommends using a React Portal.

awesome but can you add a way to close it inside the content

feature request -> i use it for user input (there is a textbox and a button inside the content) now i want to close the popup after the button is clicked.

No CSS File after Building?

Literally what the title says. Not a big issue, but just weird how it's in the readme.

import "react-awesome-popover/build/index.css";

Popper.js version

Current behavior:
The actual dependency to popper.js is marked as ^.0.7.4 and installs popper.js in version 0.7.5

Expected behavior:
upgrade dependency to use only 0.7.4 or 8.0.0 or above. It seems that popper.js 0.7.5 has a huge performance issue

Thanks!

Conflict with Povider from react-redux

Hello once I installed react-awesome-popover with npm i -D react-awesome-popover. My application create a error. The error disappeared when I changed <Provider/> from "react-redux" to a simple <div/>. Once I uninstall the package my app rework perfectly.

• react": "^16.11.0"
• react-dom": "^16.11.0"
• react-redux": "^7.1.3"
• redux": "^4.0.4"
• ...

The error was: Invalid hook call. Hooks can only be called inside of the body of a function component.

Placement variations have unexpected render outcomes.

Hi,

In my application I want a popover with arrow that is aligned to the bottom right of the button.
From your codebase I understand that you leverage on Popper.js, which has the "bottom-end" placement option for that use case. When using that here, it has a broken outcome: https://jsfiddle.net/x48ph3zp/5/

It would be nice if that problem could be solved.
Thank you in advance!

right-start position has wrong arrow rotation

action={null} is not working for controlled component

Even using action={null} and the open props the popover is displaying by the hover action.
eg.

<Popover action={null} open={isPopoverOpen}>
...
</Popover>

can you event stopPropagation

Move react to peerDependencies