floating-ui / react-popper Goto Github PK

Steps to reproduce:

1. Modify the <App /> component in /example/index.jsx

const App = () =>
  <div
    style={{
      padding: 200,
    }}
  >
    <div style={{ marginBottom: 200 }}>
      <MultipleExample />
    </div>
    <div style={{ marginBottom: 200 }}>
      <AnimatedExample />
      <AnimatedExample /> // popper rendered in incorrect position
      <AnimatedExample /> // popper rendered in incorrect position
    </div>
  </div>
ReactDOM.render(<App />, document.getElementById('app'))

2. Popper rendered in incorrect position, not directly above the component (purple box)

I just noticed that if I use the following code:

  <Popper placement="top">
     {this.state.isOpen &&
        <div>test</div>
     }
  </Popper>

There are issues with the placement of the popper content. I'm guessing this is because the popper is being measured when it has no contents. In the simple case this is easy to fix by moving the conditional outside of the popper.

That being said, I did some more digging and found that if the contents of the Popper component change its size/position are not currently recalculated. It would be nice if the Popper component would handle updates to its contents.

Right now seems like you are letting Popper use the applyStyle modifier to directly edit the DOM and apply the needed styles.

I think it would be much better to disable applyStyle and use React to update the DOM.

Here there's an example:
https://gist.github.com/FezVrasta/6533adf4358a6927b48f7478706a5f23

I have poppers that are rendered inside overflow:hidden containers; this causes the poppers to be partially hidden/cropped.

@FezVrasta has indicated that this should be achievable by putting the <Popper> somewhere outside of the overflow:hidden container have it reference the target.

I'm not sure how to do this with react-popper, though. Any ideas/advice?

https://www.webpackbin.com/bins/-KrKed4BSmoF34kPGmjh

Hi there,

As mentioned on Twitter, I'm having some issues using VelocityTransitionGroup with react-popper. When first animating the popper in, the positioning is wrong. To fix it, you need to cause a re-render, either through resizing the window, or similar things that will schedule an update.

I have made a small reproduction repo that illustrates the issue. The body of the render function is as follows;

const enter = {
  animation: 'fadeIn'
};
const leave = {
  animation: 'fadeOut'
};

return (
  <Manager>
    <Target onClick={this.handleTogglePopover}>
      {this.props.target}
    </Target>
    <VelocityTransitionGroup enter={enter} leave={leave}>
      {isOpen ? (
        <Popper placement={this.props.placement}>
          {this.props.children}
          <Arrow className="popper__arrow" />
        </Popper>
      ) : null}
   </VelocityTransitionGroup>
  </Manager>
);

I've also tried following the tips in #13, by making the child of <Popper /> into a function, and applying the props, but that didn't make any difference in the position.

I'm starting to think that I might need to pass a modifier to make sure it updates on render, but I was under the impression that that should happen automatically through react-popper.

To import them from 'prop-types' instead of React.

This warning is coming when upgrading to React16

Hey. Sorry if I'm missing something obvious, but any idea why I might be getting the following error?

Warning: React.createElement: type is invalid -- expected a string (for built-in
components) or a class/function (for composite components) but got: undefined.
You likely forgot to export your component from the file it's defined in. Check
the render method of PopperExample.

My PopperExample is basically a copy of the example code...

// PopperExample.js
import React from 'react'
import { PopperManager, Target, Popper, Arrow } from 'react-popper'

const PopperExample = () => (
  <PopperManager placement="bottom">
    <Target style={{ width: 120, height: 120, background: '#b4da55' }}>
      Target Box
    </Target>
    <Popper className="popper">
      Popper Content
      <Arrow className="popper__arrow"/>
    </Popper>
  </PopperManager>
);

export default PopperExample;

Better dev experiences help when coding. I love what React Router does here. Let's copy that :)

So, I recently updated one of my React utilities and I ended up needing to support the same case you struggled on.

The solution I reached is to ask for the custom component assigned to the component property to have a getRef property. It works very well and doesn't require findDOMNode.

https://github.com/FezVrasta/react-resize-aware/tree/master#self-containing

You may use a method like this instead of the current child function to make the API cleaner.

nb: In my case I also needed the custom component to have children defined, but for react-popper this isn't needed.

Hey..

Can you update to version 1.10.2.
It solves an issue i reported, so an update is much appreciated... :)

Hello,
I'm having problems when the popover, placed at bottom, hits/gets bigger than the viewport. When it hits the viewport, it goes above the attached element.
You can see the baviour here:
https://codesandbox.io/s/r5yw8nv43q

I've tried to work with the preventOverflow and with the keepTogether properties, but no progress.

If I have some popper content that can change size (which could possibly result in the 'correct' position of the popper changing), what is the best way to handle this in this library? I assume the correct way in plain Popper.js is to call scheduleUpdate on the Popper instance, but I don't think I have access to that with react-popper?

I'm getting the following after updating to 0.5.0:

TypeError: null is not an object (evaluating 'reference.jquery')

seems to be coming from here, unless something else is going on: https://github.com/FezVrasta/popper.js/blob/master/src/popper/index.js#L120

It would be cool if we could make this really easy and have a prop that passes down the id of a container or something similar to render <Popper/> components into.

I'd like to use Jest. Don't have time right now to set this help. Any help setting this up is greatly appreciated :)

using a function is nice, but because of the ref I need to make sure the child component is not a functional component, which at times means I need to have an extra node in the dom that may or may not mess with styling, etc.

I'm trying to have an arrow next to a popover that moves with the popover. This seems to be supported in vanilla Popper.js, and the relevant code seems to be present in react-popper to pass the style computed from Popper down into the Arrow component, however in my app, I see style={} on that component.

I used some logs and the debugger to try to narrow down the issue: I think Popper is mounting and implicitly Arrow needs to re-render to consider the new props passed in via style. However, it doesn't rerender:

15:57:51.482 Popper.js:112 getChildContext Popper {props: {…}, context: {…}, refs: {…}, updater: {…}, state: {…}, …}
15:57:51.498 Popper.js:96 _getArrowStyle Popper {props: {…}, context: {…}, refs: {…}, updater: {…}, state: {…}, …}
15:57:51.522 Popper.js:144 _updatePopper Popper {props: {…}, context: {…}, refs: {…}, updater: {…}, state: {…}, …}context: {popperManager: {…}}props: {placement: "right", children: {…}, component: "div", eventsEnabled: true, modifiers: {…}}refs: {}state: {data: {…}}updater: {isMounted: ƒ, enqueueCallback: ƒ, enqueueCallbackInternal: ƒ, enqueueForceUpdate: ƒ, enqueueReplaceState: ƒ, …}_arrowNode: div.settings_editor_arrow_getArrowStyle: ƒ ()_getPopperPlacement: ƒ ()_getPopperStyle: ƒ ()_getTargetNode: ƒ ()_node: div_popper: Popper {options: {…}, state: {…}, reference: div, scheduleUpdate: ƒ, update: ƒ, …}_reactInternalInstance: ReactCompositeComponentWrapper {_currentElement: {…}, _rootNodeID: 0, _compositeType: 0, _instance: Popper, _hostParent: ReactDOMComponent, …}_setArrowNode: ƒ (node)_updateStateModifier: {enabled: true, order: 900, fn: ƒ}isMounted: (...)replaceState: (...)__proto__: ReactComponent
15:57:51.524 Popper.js:153 creating popper
15:57:51.535 Popper.js:112 getChildContext Popper {props: {…}, context: {…}, refs: {…}, updater: {…}, state: {…}, …}
15:57:51.541 Popper.js:112 getChildContext Popper {props: {…}, context: {…}, refs: {…}, updater: {…}, state: {…}, …}

My best understanding of the issue is that React doesn't know that componentDidMount() implicitly means that Arrow must rerender, thus Arrow is stuck behind.

If I manually click on MyArrowComponent instance in the React devtools and type $r.forceUpdate() I can get it to have the correct behavior.

I was thinking that we may ship a breaking change as major version that switches the value of the tag of Manager to false by default.

This will make the library work with the new wrapless-components of React 16 but will still allow to fallback to the old behavior of a wrapping element if user is using an older version.

What's your take on this?

Hi,

I'm facing a console bug with Popper at that line

Dunno why, and things seems to work smoothly despite that error.

Should not we test this._popper before, like done above in the file?

Hi,

I have a bundle created using rollup and react-popper is listed as an external of that bundle. Then that bundle is consumed by a webpack application as an ES bundle (to allow for better tree shaking).

At application runtime _reactPopper is undefined.

This problem goes away (as well as tree shaking) when using UMD bundle from rollup.

Has anyone managed to configure rollup bundle with react-popper as an external and consume it as part of an ES bundle in webpack?

Thank you for any suggestions.

Hey, when I run npm install I'm getting: No compatible version found: react-aria@'>=0.3.0 <0.4.0'

i have a few cases where i'd like to "react" to some of the Popper data in my parent component (the one that renders <Popper>), but i currently have no way to access this data safely. the only current option is to grab a ref to the Popper and inspect its state.data, but that doesn't feel reliable.

some sort of callback prop that would allow my parent component to receive the new Popper data would be very helpful. I wouldn't store all of it, i'd just look at the parts i need and update my minimal state.

(in particular, i'd like to have access to arrow offsets so i can modify my transform-origin)

I feel really foolish, but I couldn't figure out why examples wouldn't serve from yarn dev. Everything starts up on 0.0.0.0:3000 yet there is no content.

❯❯❯ yarn dev                                                                                                                                                                                                ⏎
yarn dev v0.27.5
$ webpack-dev-server --hot --progress --host 0.0.0.0
 70% 1/1 build modules http://0.0.0.0:8080/webpack-dev-server/
webpack result is served from /
content is served from ./example
Hash: fc5d0cb47180739c97bc  
Version: webpack 1.15.0
Time: 7949ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.38 MB       0  [emitted]  index
chunk    {0} bundle.js (index) 1.29 MB [rendered]

...

webpack: Compiled successfully.

With wget:

~/p/react-popper ❯❯❯ wget http://localhost:3000
--2017-08-09 09:23:41--  http://localhost:3000/
Resolving localhost... ::1, fe80::1, 127.0.0.1
Connecting to localhost|::1|:3000... failed: Connection refused.
Connecting to localhost|fe80::1|:3000... failed: Connection refused.
Connecting to localhost|127.0.0.1|:3000... failed: Connection refused.
~/p/react-popper ❯❯❯ wget http://10.1.10.13:3000                                                                                                                                                                             ⏎
--2017-08-09 09:24:46--  http://10.1.10.13:3000/
Connecting to 10.1.10.13:3000... failed: Connection refused.
~/p/react-popper ❯❯❯      

I'm mystified. Is it working for you?

I'm probably missing something fairly obvious here... but I'm trying to make a tooltip style popper and I keep getting some jquery error:

Component code:

class InfoTip extends Component {
  state = {
    visible: false,
  }

  onMouseOver = () => {
    this.setState({visible: true});
  }

  onMouseOut = () => {
    this.setState({visible: false});
  }

  render() {
    return (
      <Manager>
        <Target>
          {({targetProps}) => {
            return (
              <InfoIcon
                dark
                style={{cursor: 'help'}}
                onMouseEnter={this.onMouseOver}
                onMouseLeave={this.onMouseOut}
                {...targetProps}
              />
            );
          }}
        </Target>

        {this.state.visible && (
          <Popper placement="right" className="popper">
            {this.props.children}
            <Arrow className="popper__arrow"/>
          </Popper>
        )}
      </Manager>
    );
  }
}

Any thoughts?

I have a SVG with many paths were I want to show a popover on hover over each path. The problem is that the popper gets attached inside the SVG, and normal html elements won't render inside a SVG.

Is there a way to

1. dynamically set a target so I can place one popper independently of the targets, and just updating the target on hover?
   or
2. attach all the poppers somewhere else in the DOM so they won't end up inside the SVG?

Sorry for asking simple questions here, but I've tried to figure this out and failed.

My poppers are often showing up under other elements on the page. I'm trying to figure out a way to add a z-index to the popper, but figured it was worth asking here in case others have already solved this issue

I've made a very simple demo:
https://codesandbox.io/s/rR8XggWW2

I intended for the popper to show to the right of the button, but instead it shows over it (it actually seems to be trying to display to the left of it, but is being pushed over).

Am I doing something wrong?

"popper.js" type definitions have been updated recently and they are braking "react-popper" type definitions. I am getting:

Namespace ''popper.js'' has no exported member 'Placement'.
Namespace ''popper.js'' has no exported member 'Modifiers'.

They have introduced braking changes in 1.11.1. Why don't you lock your "popper.js" to "1.11.0"?

Hi,

I am trying to apply a custom transformation to the popper element, depending on weather the popper is visible or not.

To be more specific, I am implementing a tooltip component that holds a state of isVisible.
Based on this state, I would like to apply a custom style object on popper with my own CSS value for transform.

For example, If the tooltip isn't visible I would like to position it slightly higher (relative to the target), so that once it becomes visible again, I will be able to animate it.

Is there a way for me to intervene with the calculation of the to-be applied style and make changes to it to force popper render with these styles?

Thanks,

seems somewhat unnecessary to only support left OR top offset for arrow, but not both: https://github.com/souporserious/react-popper/blob/master/src/Popper.jsx#L155-L159

I'm writing a modifier to dynamically offset the popper on the alternate axis and counter-offset the arrow on the same axis, instead of relying on CSS margins etc, but react-popper actively fights this.

Is it fair to just do the simple thing and simply apply top and left offsets at all times?

I was using the following code in 0.4.3 without any issues:

     <Manager>
        <Target component={null}>
          <Button label="button" onClick={this.togglePopover} />
        </Target>
        <VelocityTransitionGroup
          enter={{
            animation: {
              opacity: [1, 'easeOutQuart'],
              scale: [1, [600, 35]],
            },
            duration: 300,
          }}
          leave={{
            animation: {
              opacity: [0, 'easeOutQuart'],
              scale: [0.3, [500, 35]],
            },
            duration: 150,
          }}
          runOnMount
        >
          {this.state.isOpen &&
            <Popper placement="bottom">
              Popper!
            </Popper>}
        </VelocityTransitionGroup>
      </Manager>

I rewrote this code after updating to 0.5.0:

      <Manager>
          <Target>
            {({ targetRef }) => (
              <Button
                label="button"
                ref={targetRef}
                onClick={this.togglePopover}
              />
            )}
          </Target>
          <VelocityTransitionGroup
            enter={{
              animation: {
                opacity: [1, 'easeOutQuart'],
                scale: [1, [600, 35]],
              },
              duration: 300,
            }}
            leave={{
              animation: {
                opacity: [0, 'easeOutQuart'],
                scale: [0.3, [500, 35]],
              },
              duration: 150,
            }}
            runOnMount
          >
            {this.state.isOpen &&
              <Popper placement="bottom">
                {({ popperRef, popperStyle, popperPlacement }) => (
                  <div
                    ref={popperRef}
                    style={popperStyle}
                    data-placement={popperPlacement}
                  >
                    Menu?
                  </div>
                )}
              </Popper>}
          </VelocityTransitionGroup>
      </Manager>

I'm sure there is a possibility I'm doing something wrong and I'll keep hacking on it, but I figured it was worth raising!

import React from 'react';
import { Manager, Target, Popper } from 'react-popper';

const Div = props => <div {...props} />;

export default function Stuff() {
  return (
    <Manager>
      <Target component={Div}>
        Click me
      </Target>
      <Popper>
        <div>
          Something here
        </div>
      </Popper>
    </Manager>
  );
};

This renders a Popper element with opacity: 0.

Am I doing something wrong?

This would rely on:
https://popper.js.org/popper-documentation.html#referenceObject

I kept receiving this error in my console, I think it's due to this line:

https://github.com/souporserious/react-popper/blob/2109ac0aa4210eafc668b3abe8d6e7a9ac2b2ada/src/Popper.jsx#L76

Simply changed that to fn and error went away. Can you reproduce?

I'm not sure if this is related to react-popper or the underlying popper.js, but it appears as though the modifier preventOverflow.boundariesElement does not work as expected with the value scrollParent. I am testing with a target inside of a scrolling div (inside a modal) and I am not seeing the same behavior as I do when I set preventOverflow.boundariesElement to viewport. I am most interested in implementing the "hide" functionality when a target scrolls out of view and I am able to get that working with viewport, but NOT with scrollParent.

I'm not sure if this is a popper issue or a react-popper issue, so I'll report here now as I keep digging.

I have a popper with a fixed size (width and height). When I open it (placement=bottom) in a window where there is room, I don't have any issues, its placed correctly.

https://cl.ly/1w0m2T1P1j3u

If I think resize the window to the point that the popper no longer fits, things get odd. Basically from what I can tell the position: absolute is removed from the Popper styles. All the other values are still there, so I'm not sure why or what is going on.

https://cl.ly/1t1M44063V2J

If I then resize the window so there is again size, it still no longer has position: absolute:

https://cl.ly/1W3A1c3T1x3C

here is what I'm seeing in the DOM:

<div style="top: 0px; left: 0px; transform: translate3d(-380px, 64px, 0px); will-change: transform;" data-placement="bottom"><div data-css-32nwhk="View.Column.Content"><div data-css-1hqne8e="View.Column">Content!</div></div></div>

I don't think this is a bug, but I wanted to post here because it might help someone. I was trying to use reactstrap, but I also had my env var NODE_PATH=.

This caused a weird problem with react-popper where an exception CaseSensitivePathsPlugin would be thrown because popper.js appears on the filepath in node_modules as an actual file and ALSO as the actual node_modules dependency.

I removed NODE_PATH=. from my environment (which I guess is a bad idea, but I've been using that for a while just to have nicer include paths) and the problem went away.

warning.js:36 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: boolean.

react-dom.min.js:15 Uncaught Error: Minified React error #130; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=130&args[]=boolean&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at r (react-dom.min.js:15)
at p.i [as _instantiateReactComponent] (react-dom.min.js:15)
at performInitialMount (react-dom.min.js:13)
at p.mountComponent (react-dom.min.js:13)
at Object.mountComponent (react-dom.min.js:14)
at mountChildren (react-dom.min.js:14)
at m._createInitialChildren (react-dom.min.js:13)
at mountComponent (react-dom.min.js:13)
at Object.mountComponent (react-dom.min.js:14)
at performInitialMount (react-dom.min.js:13)

So my code looks like this:

  render() {
    const { target, menu, config } = this.props;
    return (
      <Manager {...config.manager}>
        <Target {...config.target} >
          {target}
        </Target>
        <Popper {...config.popper}>
          {menu}
          <Arrow {...config.arrow} />
        </Popper>
      </Manager>
    );
  }

where

config.arrow = {
    component: MenuArrow
}

The MenuArrow is rendering, but the popper position does not adjust for its size. If I set some widht and height directly on Arrow, then it works as expected.

After upgrading to 0.7.1 the dynamic positioning of the arrow became incorrect. Depending on the chosen placement, it adds a top or left attribute to the arrow so it's contained inside the popper element. It even happens with the most basic readme example together with the css stylesheet provided by popper itself (https://github.com/FezVrasta/popper.js/blob/master/docs/css/popper.css):

<Manager>
    <Target style={{ width: 120, height: 120, background: '#b4da55' }}>
      Target Box
    </Target>
    <Popper placement="left" className="popper">
      Left Content
      <Arrow className="popper__arrow"/>
    </Popper>
    <Popper placement="right" className="popper">
      Right Content
      <Arrow className="popper__arrow"/>
    </Popper>
  </Manager>

floating-ui/floating-ui#94

@souporserious would you be open to including a .d.ts file in the NPM package for typescript consumers? i've been writing it locally and would be happy to contribute.

there'd be some additional maintenance cost to keep the definitions updated as the API evolves, but I'll be happy to help out if you mention me in the future!

https://github.com/souporserious/react-popper/blob/master/src/Popper.jsx#L67-L77

This modifier should return data to allow custom modifiers to run after it.

Take this case in consideration:

<Manager>
  <Something>
    <Target />
    <Popper />
  </Something>
</Manager>

this will generate the following markup:

<div>
  <div>
    <div />
    <div />
  </div>
</div>

In this case tho, we could avoid to generate the top wrapping div, because Manager is going to render a single child.

I think we could support this case.

<Target>
  {Children.only(children)}
</Target>

renders

<div>
  <dom of my component>
</div>

The div wrapping causes issues because it has by default block style whereas the child can be an inline element or with its own padding/margins etc.

Desired output should just be <dom of my component> without wrapping divs.
Target should ideally be cloning Children.only(children).

Hi,
referring to this issue in styled-component repo.
styled-components/styled-components#1268

I was wondering how can I avoid that unknown props will be passed to Manager's div.
I need to pass these properties in order to use it in a style js conf file for styled-component element.

https://www.webpackbin.com/bins/-KxN8G3pDI0nHJTNmExw

and like you suggested if I set tag={false} it retrieves me this error:

Uncaught Invariant Violation: Manager.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Popper is currently passing down restProps (or all unused props of Popper) to it's direct child here:
https://github.com/souporserious/react-popper/blob/master/src/Popper.jsx#L207

This causes the following warning if a user-defined component attribute is not passed down or an html tag is specified as the component prop:

Warning: Unknown prop 'closePortal' on <div> tag.

I suggest that restProps should only be passed down if the component is a user-defined react component not an html tag.