Przeglądaj źródła

Fix rare case of dropdown's list position in modal

If a dropdown is opened in a modal which, in its turn, is opened on page
which is scrolled, dropdown's list position wouldn't be correct.
Because, in that case, the body's scroll is removed and it's top
property is set instead, so that the body can't be scrolled while a
modal is opened. This complicates the dropdown's list position.
Sergiu Miclea 8 lat temu
rodzic
commit
d18c16ada6
1 zmienionych plików z 7 dodań i 1 usunięć
  1. 7 1
      src/components/molecules/Dropdown/Dropdown.jsx

+ 7 - 1
src/components/molecules/Dropdown/Dropdown.jsx

@@ -158,7 +158,13 @@ class Dropdown extends React.Component {
       this.tipRef.style.display = 'block'
     }
 
-    this.listRef.style.top = `${listTop + window.pageYOffset}px`
+    // If a modal is opened, body scroll is removed and body top is set to replicate scroll position
+    let scrollOffset = 0
+    if (parseInt(document.body.style.top, 10) < 0) {
+      scrollOffset = -parseInt(document.body.style.top, 10)
+    }
+
+    this.listRef.style.top = `${listTop + (window.pageYOffset || scrollOffset)}px`
     this.listRef.style.left = `${this.buttonRect.left}px`
   }