It is not possible to pass custom arrow and applyStyle modifiers to popper.js

[dmitriirudakov]

Steps to reproduce the problem

1. Create an empty react project
2. Install Semantic-UI-React >= v0.87.0
3. Use Popup component and try to pass 'arrow' and 'applyStyle' modifiers for popper.js.

<Popup
    popperModifiers={{
    shift: {enabled: true},
    keepTogether: {enabled: true},
    arrow: {enabled: true, element: '.popup__arrow'},
    applyStyle: {enabled: true}
  }}
... 
/>
...
</Popup>

What is the expected behavior?

Modifiers will be passed to popper.js.

What went wrong?

Props are redefined and modifiers were not passed to popper.js
React-popper uses its own prop called 'arrowNode' instead of a usage of 'modifiers.arrow' which is under the hood of popper.js.
Also react-popper disables 'applyStyle' modifier for always.

https://github.com/FezVrasta/react-popper/blob/master/src/Popper.js

Any other comments?

I would say 'modifiers.arrow' should take a precedence over 'arrowNode' and 'modifiers.applyStyle' should be taken from props at least when 'modifiers.arrow' was passed so developers can pass these modifiers using 'Popup' component from Semantic-UI-React to popper.js.

https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Popup/Popup.js

Packages versions

• Popper.js: 1.15.0
• react-popper: 1.3.4