Semantic-Org / Semantic-UI-React

The official Semantic-UI-React integration
https://react.semantic-ui.com
MIT License
13.2k stars 4.04k forks source link

Popup moves as the page scrolls #4444

Closed c3-juanca closed 7 months ago

c3-juanca commented 7 months ago

Bug Report

This is related to these couple of issues: https://github.com/Semantic-Org/Semantic-UI-React/issues/1126 and https://github.com/Semantic-Org/Semantic-UI-React/issues/3569. Popup probably listening to the scroll of a window only. If popup in a div it stays on one position when scrolling the div.

This was fixed with this PR: https://github.com/Semantic-Org/Semantic-UI-React/pull/3607, and added to version 0.87.3. I can confirm that it works on that version, but testing in newer versions this doesn't work anymore, as commented in the same issue thread: https://github.com/Semantic-Org/Semantic-UI-React/issues/3569

I'm not sure if there's an open issue for this, but if not, I wanted to give it more visibility to this regression issue. Tested on version 2.1.4, which is the current latest version.

Steps

  1. Have a trigger for the popup (like a button or input)
  2. Have a long page with scrollbar
  3. Open the popup
  4. Scroll the page

Expected Result

Popup should not move as the page scrolls.

Actual Result

Popup moves as the page scrolls.

Screenshots

Current behavior 57651284-1e621280-75cd-11e9-81dc-bf482fa92e03

Expected behavior 57651198-f4105500-75cc-11e9-86ee-380f76a6a336

Version

2.1.4

Testcase

https://codesandbox.io/p/sandbox/semantic-ui-react-example-forked-v8rk2z

welcome[bot] commented 7 months ago

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

CoryDuncan commented 7 months ago

I am running into this bug as well.

One detail worth noting is that the bug seems to be specific to inline scroll (a Popup's trigger exists within a non-document scrollable area). A Popup affected by document scroll seems to work as expected.