Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-18 00:32:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

use the closest scroll parent element in popups

Browse source
This commit is contained in:
nklhrstv 2022-05-26 15:49:40 +03:00
parent d553d6a067
commit 8a8b8817bf
1 changed files with 20 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/common/Popup/Popup.js
View file

@ -7,6 +7,19 @@ const FocusLock = require('react-focus-lock').default;
const { useRouteFocused } = require('stremio-router');
const styles = require('./styles');
const getAnchorElement = (element) => {
if (element === document.documentElement) {
return element;
}
const style = window.getComputedStyle(element);
if (style.overflowY.indexOf('auto') !== -1 || style.overflowY.indexOf('scroll') !== -1) {
return element;
}
return getAnchorElement(element.parentElement);
};
const Popup = ({ open, direction, renderLabel, renderMenu, dataset, onCloseRequest, ...props }) => {
const routeFocused = useRouteFocused();
const labelRef = React.useRef(null);
@ -49,14 +62,16 @@ const Popup = ({ open, direction, renderLabel, renderMenu, dataset, onCloseReque
React.useLayoutEffect(() => {
if (open) {
const autoDirection = [];
const documentRect = document.documentElement.getBoundingClientRect();
const anchor = getAnchorElement(labelRef.current);
const anchorRect = anchor.getBoundingClientRect();
const labelRect = labelRef.current.getBoundingClientRect();
const menuRect = menuRef.current.getBoundingClientRect();
const labelPosition = {
left: labelRect.left - documentRect.left,
top: labelRect.top - documentRect.top,
right: (documentRect.width + documentRect.left) - (labelRect.left + labelRect.width),
bottom: (documentRect.height + documentRect.top) - (labelRect.top + labelRect.height)
left: labelRect.left - anchorRect.left,
top: labelRect.top - anchorRect.top,
right: (anchorRect.width + anchorRect.left) - (labelRect.left + labelRect.width),
bottom: (anchorRect.height + anchorRect.top) - (labelRect.top + labelRect.height)
};
if (menuRect.height <= labelPosition.bottom) {