From c20c7a3fff4d0a4b7759945d3dd894a4bb5ab38e Mon Sep 17 00:00:00 2001 From: Leo Lamprecht Date: Fri, 24 Mar 2023 15:12:33 +0100 Subject: [PATCH 1/3] Only consider document scrollable if not prevented --- .../src/utilities/scroll/getScrollableAncestors.ts | 13 ++++++++++--- .../{isScrollable.ts => hasOverflowStyles.ts} | 8 ++++---- packages/core/src/utilities/scroll/index.ts | 2 +- .../src/utilities/scroll/isScrollingDisabled.ts | 12 ++++++++++++ .../core/src/utilities/scroll/isScrollingEnabled.ts | 11 +++++++++++ 5 files changed, 38 insertions(+), 8 deletions(-) rename packages/core/src/utilities/scroll/{isScrollable.ts => hasOverflowStyles.ts} (79%) create mode 100644 packages/core/src/utilities/scroll/isScrollingDisabled.ts create mode 100644 packages/core/src/utilities/scroll/isScrollingEnabled.ts diff --git a/packages/core/src/utilities/scroll/getScrollableAncestors.ts b/packages/core/src/utilities/scroll/getScrollableAncestors.ts index 8c0127b1..7b7f474f 100644 --- a/packages/core/src/utilities/scroll/getScrollableAncestors.ts +++ b/packages/core/src/utilities/scroll/getScrollableAncestors.ts @@ -6,7 +6,8 @@ import { } from '@dnd-kit/utilities'; import {isFixed} from './isFixed'; -import {isScrollable} from './isScrollable'; +import {isScrollingDisabled} from './isScrollingDisabled'; +import {isScrollingEnabled} from './isScrollingEnabled'; export function getScrollableAncestors( element: Node | null, @@ -28,7 +29,13 @@ export function getScrollableAncestors( node.scrollingElement != null && !scrollParents.includes(node.scrollingElement) ) { - scrollParents.push(node.scrollingElement); + const computedStyle = getWindow(element).getComputedStyle( + node.scrollingElement + ); + + if (!isScrollingDisabled(node.scrollingElement, computedStyle)) { + scrollParents.push(node.scrollingElement); + } return scrollParents; } @@ -44,7 +51,7 @@ export function getScrollableAncestors( const computedStyle = getWindow(element).getComputedStyle(node); if (node !== element) { - if (isScrollable(node, computedStyle)) { + if (isScrollingEnabled(node, computedStyle)) { scrollParents.push(node); } } diff --git a/packages/core/src/utilities/scroll/isScrollable.ts b/packages/core/src/utilities/scroll/hasOverflowStyles.ts similarity index 79% rename from packages/core/src/utilities/scroll/isScrollable.ts rename to packages/core/src/utilities/scroll/hasOverflowStyles.ts index dec1d5a9..72e0e6c0 100644 --- a/packages/core/src/utilities/scroll/isScrollable.ts +++ b/packages/core/src/utilities/scroll/hasOverflowStyles.ts @@ -1,12 +1,12 @@ import {getWindow} from '@dnd-kit/utilities'; -export function isScrollable( - element: HTMLElement, +export function hasOverflowStyles( + element: Element, computedStyle: CSSStyleDeclaration = getWindow(element).getComputedStyle( element - ) + ), + overflowRegex: RegExp ): boolean { - const overflowRegex = /(auto|scroll|overlay)/; const properties = ['overflow', 'overflowX', 'overflowY']; return properties.some((property) => { diff --git a/packages/core/src/utilities/scroll/index.ts b/packages/core/src/utilities/scroll/index.ts index b0e06320..0514d778 100644 --- a/packages/core/src/utilities/scroll/index.ts +++ b/packages/core/src/utilities/scroll/index.ts @@ -13,5 +13,5 @@ export { } from './getScrollOffsets'; export {getScrollPosition} from './getScrollPosition'; export {isDocumentScrollingElement} from './documentScrollingElement'; -export {isScrollable} from './isScrollable'; +export {isScrollingEnabled as isScrollable} from './isScrollingEnabled'; export {scrollIntoViewIfNeeded} from './scrollIntoViewIfNeeded'; diff --git a/packages/core/src/utilities/scroll/isScrollingDisabled.ts b/packages/core/src/utilities/scroll/isScrollingDisabled.ts new file mode 100644 index 00000000..6fc3968b --- /dev/null +++ b/packages/core/src/utilities/scroll/isScrollingDisabled.ts @@ -0,0 +1,12 @@ +import {getWindow} from '@dnd-kit/utilities'; + +import {hasOverflowStyles} from './hasOverflowStyles'; + +export function isScrollingDisabled( + element: Element, + computedStyle: CSSStyleDeclaration = getWindow(element).getComputedStyle( + element + ) +): boolean { + return hasOverflowStyles(element, computedStyle, /(hide)/); +} diff --git a/packages/core/src/utilities/scroll/isScrollingEnabled.ts b/packages/core/src/utilities/scroll/isScrollingEnabled.ts new file mode 100644 index 00000000..22382b65 --- /dev/null +++ b/packages/core/src/utilities/scroll/isScrollingEnabled.ts @@ -0,0 +1,11 @@ +import {getWindow} from '@dnd-kit/utilities'; +import {hasOverflowStyles} from './hasOverflowStyles'; + +export function isScrollingEnabled( + element: Element, + computedStyle: CSSStyleDeclaration = getWindow(element).getComputedStyle( + element + ) +): boolean { + return hasOverflowStyles(element, computedStyle, /(auto|scroll|overlay)/); +} From afa193130af1e3dad06d05a7265fb88539bac31f Mon Sep 17 00:00:00 2001 From: Leo Lamprecht Date: Fri, 24 Mar 2023 15:24:50 +0100 Subject: [PATCH 2/3] Fixed typo for incorrect CSS property --- packages/core/src/utilities/scroll/isScrollingDisabled.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/utilities/scroll/isScrollingDisabled.ts b/packages/core/src/utilities/scroll/isScrollingDisabled.ts index 6fc3968b..e42a2f90 100644 --- a/packages/core/src/utilities/scroll/isScrollingDisabled.ts +++ b/packages/core/src/utilities/scroll/isScrollingDisabled.ts @@ -8,5 +8,5 @@ export function isScrollingDisabled( element ) ): boolean { - return hasOverflowStyles(element, computedStyle, /(hide)/); + return hasOverflowStyles(element, computedStyle, /(hidden)/); } From 62b5ded084a6c49a8926353426b1f251a250d5a5 Mon Sep 17 00:00:00 2001 From: Leo Lamprecht Date: Fri, 24 Mar 2023 15:29:22 +0100 Subject: [PATCH 3/3] Added changeset for patch change --- .changeset/breezy-taxis-tan.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/breezy-taxis-tan.md diff --git a/.changeset/breezy-taxis-tan.md b/.changeset/breezy-taxis-tan.md new file mode 100644 index 00000000..6b1a4d91 --- /dev/null +++ b/.changeset/breezy-taxis-tan.md @@ -0,0 +1,5 @@ +--- +'@dnd-kit/core': patch +--- + +Avoid considering `document` as scrollable if `overflow: hidden` is present.