Semantic-ui-react: Popup: positioning glitch when using negative vertical offset

Created on 23 May 2019  路  6Comments  路  Source: Semantic-Org/Semantic-UI-React

Bug Report

Implementing the new Popper offset parameter (#3532), something weird happens:

(first is without offset, then with offset):

tooltip offset issue short

Steps

A Popup configured with

position="bottom center"
offset="0, -4"

(near the top of the page, that could have something to do with it).

Expected Result

Tooltip appears shifted up, but still in the same orientation (bottom center).

Actual Result

Orientation changes to top, making it very glitchy.

Version

0.87.1

Testcase

https://codesandbox.io/s/semantic-ui-react-2m6rb

As a workaround I tried to use the positionFixed parameter, but it doesn't appear to be passed to Popper.

bug help wanted

All 6 comments

Might be related to this:

NB: If you desire to apply offsets to your poppers in a way that may make them overlap with their reference element, unfortunately, you will have to disable the flip modifier. You can read more on this at this issue.

Good catch, we should expose modifiers from Popper.JS 馃憤

Any update on this ?

The 0.87.0 broke a lot of our popup that used this mecanism to render the content closer to the trigger.

@TomDemulierChevret @rijk please take a look on #3654. Craziness is stopped with pinned: true:

popup-pinned-fix

I also exposed Popper's modifiers as popperModifiers.

Perfect.

Do you know when the next release including this fix will be available ?

I am plan to have it on this week.

Was this page helpful?
0 / 5 - 0 ratings