Skip to content

Commit

Permalink
Fix #7566: hideOverlaysOnDocumentScrolling fix for dialogs
Browse files Browse the repository at this point in the history
  • Loading branch information
melloware committed Jan 6, 2025
1 parent e17b072 commit 93debc7
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 7 deletions.
32 changes: 26 additions & 6 deletions components/lib/utils/DomHandler.js
Original file line number Diff line number Diff line change
Expand Up @@ -607,13 +607,26 @@ export default class DomHandler {
return element.parentNode === null ? parents : this.getParents(element.parentNode, parents.concat([element.parentNode]));
}

/**
* Gets all scrollable parent elements of a given element
* @param {HTMLElement} element - The element to find scrollable parents for
* @param {boolean} hideOverlaysOnDocumentScrolling - Whether to include window/document level scrolling
* @returns {Array} Array of scrollable parent elements
*/
static getScrollableParents(element, hideOverlaysOnDocumentScrolling = false) {
let scrollableParents = [];

if (element) {
// Get all parent elements
let parents = this.getParents(element);
// Regex to match auto or scroll overflow values
const overflowRegex = /(auto|scroll)/;

/**
* Checks if an element has overflow scroll/auto in any direction
* @param {HTMLElement} node - Element to check
* @returns {boolean} True if element has overflow scroll/auto
*/
const overflowCheck = (node) => {
let styleDeclaration = node ? getComputedStyle(node) : null;

Expand All @@ -622,21 +635,26 @@ export default class DomHandler {
);
};

/**
* Adds a scrollable parent element to the collection
* @param {HTMLElement} node - Element to add
*/
const addScrollableParent = (node) => {
if (hideOverlaysOnDocumentScrolling) {
// nodeType 9 is for document element
// For document/body/html elements, add window instead
scrollableParents.push(node.nodeName === 'BODY' || node.nodeName === 'HTML' || node.nodeType === 9 ? window : node);
} else {
scrollableParents.push(node);
}
};

// Iterate through all parent elements
for (let parent of parents) {
// Check for custom scroll selectors in data attribute
let scrollSelectors = parent.nodeType === 1 && parent.dataset?.scrollselectors;

if (scrollSelectors) {
let selectors = scrollSelectors.split(',');

// Check each selector
for (let selector of selectors) {
let el = this.findSingle(parent, selector);

Expand All @@ -646,18 +664,20 @@ export default class DomHandler {
}
}

// BODY
// Check if the parent itself is scrollable
if (parent.nodeType === 1 && overflowCheck(parent)) {
addScrollableParent(parent);
}
}
}

// we should always at least have the body or window
// Ensure window/body is always included as fallback
if (!scrollableParents.some((node) => node === document.body || node === window)) {
scrollableParents.push(window);
scrollableParents.push(hideOverlaysOnDocumentScrolling ? window : document.body);
}

console.log('getScrollableParents', scrollableParents, hideOverlaysOnDocumentScrolling);

return scrollableParents;
}

Expand Down
3 changes: 2 additions & 1 deletion pages/_app.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,8 @@ export default function MyApp({ Component, pageProps }) {
};

const primereactConfig = {
ripple: true
ripple: true,
hideOverlaysOnDocumentScrolling: false
};

return (
Expand Down

0 comments on commit 93debc7

Please sign in to comment.