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: {…}, …}