From 9d1730ba4f97a51d25c7e704acd1a4c2be8f7182 Mon Sep 17 00:00:00 2001 From: Adam Szmyd Date: Thu, 21 Sep 2023 01:11:11 +0200 Subject: [PATCH] Make scroll lock div work on a document context it belongs to (#5347) * Make scroll lock div work on a document context it belongs to * Changeset update --- .changeset/nasty-turkeys-rescue.md | 5 +++++ packages/react-select/src/internal/ScrollManager.tsx | 11 ++++++++--- 2 files changed, 13 insertions(+), 3 deletions(-) create mode 100644 .changeset/nasty-turkeys-rescue.md diff --git a/.changeset/nasty-turkeys-rescue.md b/.changeset/nasty-turkeys-rescue.md new file mode 100644 index 0000000000..16dd369264 --- /dev/null +++ b/.changeset/nasty-turkeys-rescue.md @@ -0,0 +1,5 @@ +--- +'react-select': patch +--- + +Make scroll lock div work on a document context it belongs to diff --git a/packages/react-select/src/internal/ScrollManager.tsx b/packages/react-select/src/internal/ScrollManager.tsx index 802ab1e76f..4e1440008f 100644 --- a/packages/react-select/src/internal/ScrollManager.tsx +++ b/packages/react-select/src/internal/ScrollManager.tsx @@ -1,6 +1,6 @@ /** @jsx jsx */ import { jsx } from '@emotion/react'; -import { Fragment, ReactElement, RefCallback } from 'react'; +import { Fragment, ReactElement, RefCallback, MouseEvent } from 'react'; import useScrollCapture from './useScrollCapture'; import useScrollLock from './useScrollLock'; @@ -14,8 +14,13 @@ interface Props { readonly onTopLeave?: (event: WheelEvent | TouchEvent) => void; } -const blurSelectInput = () => - document.activeElement && (document.activeElement as HTMLElement).blur(); +const blurSelectInput = (event: MouseEvent) => { + const element = event.target as HTMLDivElement; + return ( + element.ownerDocument.activeElement && + (element.ownerDocument.activeElement as HTMLElement).blur() + ); +}; export default function ScrollManager({ children,