React-popper: forceUpdate is not defined

[Slapbox]

Reproduction demo

None at present.

Steps to reproduce the problem

1. Create virtual element to reference (not sure this matters)
2. On the inner popper component, which is passed the props from <Popper />, try to access this.props.forceUpdate - it will be undefined

What is the expected behavior?

forceUpdate should exist as per PopperJS v2 docs.

What went wrong?

this.props.forceUpdate is undefined

Packages versions

• Popper.js: 2.2.0
• react-popper: 2.0.0

[FezVrasta]

The docs still need some work to reflect the Popper 2 update ☹️

[Slapbox]

@FezVrasta thanks for your reply! I'm a bit confused, React-Popper _should_ expose forceUpdate(), right? v1.x passed both scheduleUpdate and update as props if I'm not mistaken.

[FezVrasta]

Yes I’m confused too 😂 I’ll take a look tomorrow.

[FezVrasta]

2.1.0 exposes forceUpdate

[Slapbox]

@FezVrasta thanks for the prompt attention!

Edit: Worked around the below successfully, but I'm not fully understanding Popper instances I guess.

Unfortunately the issue persists for us (well kind of) with react-popper and @popperjs/core each at 2.2.0.

forceUpdate is null. I see that this is this is expected if there's no popper instance. I'm a bit surprised there's no popper instance at the point we're trying to access the function though. Do you know if using a virtual reference element might be the cause?

We're trying to access forceUpdate in componentDidMount which surprised me that it no longer works. I'm guessing this is just a design choice for v2 that we'll need to work around somehow though?

[FezVrasta]

May you please provide a reproduction example on codesandbox or codepen please?

[Slapbox]

Hey @FezVrasta I won't have time to put together something more robust, but here's sort of our usage looks like:

export const PopperRoot = props => {
  return (
    <Popper
      {...props}>
      {({ ref, ...popperProps }) => (
        <InnerPopper innerRef={ref} {...props} {...popperProps} />
      )}
    </Popper>
  );
};



export class InnerPopper extends React.Component {
  componentDidMount() {
    const { forceUpdate, registerPopperFunctions } = this.props;
    //  Register functions for popper management in parent
    registerPopperFunctions({
      forceUpdatePopper: forceUpdate, //  forceUpdate will not be defined at this time
    });
  }
}

So instead we're now checking if forceUpdate is defined in componentDidUpdate and running our registerPopperFunctions at the point forceUpdate is available. It takes like 15 lines instead of 3 and has to run on every update, but it's still pretty lightweight and it works well enough.