From 7d5448161bd3dd25ce65cbe4e94d4810f19315c7 Mon Sep 17 00:00:00 2001
From: SSSS <shiyangzhaoa@gmail.com>
Date: Tue, 13 Aug 2024 11:01:34 +0800
Subject: [PATCH] fix: cannot select end time in shadow dom

---
 src/PickerInput/RangePicker.tsx |  7 ++++++-
 tests/range.spec.tsx            | 29 +++++++++++++++++++++++++++++
 tests/util/commonUtil.tsx       | 14 ++++++--------
 3 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/src/PickerInput/RangePicker.tsx b/src/PickerInput/RangePicker.tsx
index 816a8114a..46a0ced79 100644
--- a/src/PickerInput/RangePicker.tsx
+++ b/src/PickerInput/RangePicker.tsx
@@ -428,7 +428,12 @@ function RangePicker<DateType extends object = any>(
 
   // ======================== Click =========================
   const onSelectorClick: React.MouseEventHandler<HTMLDivElement> = (event) => {
-    if (!selectorRef.current.nativeElement.contains(document.activeElement)) {
+    const rootNode = (event.target as HTMLElement).getRootNode();
+    if (
+      !selectorRef.current.nativeElement.contains(
+        (rootNode as Document | ShadowRoot).activeElement ?? document.activeElement,
+      )
+    ) {
       // Click to focus the enabled input
       const enabledIndex = disabled.findIndex((d) => !d);
       if (enabledIndex >= 0) {
diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx
index 3b39edf5e..9647bee90 100644
--- a/tests/range.spec.tsx
+++ b/tests/range.spec.tsx
@@ -1,6 +1,7 @@
 // Note: zombieJ refactoring
 
 import { act, createEvent, fireEvent, render } from '@testing-library/react';
+import { createRoot } from 'react-dom/client';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 import KeyCode from 'rc-util/lib/KeyCode';
@@ -1973,4 +1974,32 @@ describe('Picker.Range', () => {
     ]);
     expect(isOpen()).toBeFalsy();
   });
+
+  const renderShadow = (props?: any) => {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+
+    const shadowRoot = host.attachShadow({
+      mode: 'open',
+      delegatesFocus: false,
+    });
+    const container = document.createElement('div');
+    shadowRoot.appendChild(container);
+
+    act(() => {
+      createRoot(container).render(<DayRangePicker {...props} />);
+    });
+
+    return shadowRoot;
+  };
+
+  it('the end date selector can be selected in shadow dom', () => {
+    const shadowRoot = renderShadow();
+
+    openPicker(shadowRoot, 1);
+
+    expect(shadowRoot.querySelectorAll('.rc-picker-input')[1]).toHaveClass(
+      'rc-picker-input-active',
+    );
+  });
 });
diff --git a/tests/util/commonUtil.tsx b/tests/util/commonUtil.tsx
index ac5559517..cc972e330 100644
--- a/tests/util/commonUtil.tsx
+++ b/tests/util/commonUtil.tsx
@@ -112,7 +112,7 @@ export async function waitFakeTimer() {
   });
 }
 
-export function openPicker(container: HTMLElement, index = 0) {
+export function openPicker(container: HTMLElement | ShadowRoot, index = 0) {
   const input = container.querySelectorAll('input')[index];
   fireEvent.mouseDown(input);
 
@@ -123,7 +123,7 @@ export function openPicker(container: HTMLElement, index = 0) {
   fireEvent.click(input);
 }
 
-export function closePicker(container: HTMLElement, index = 0) {
+export function closePicker(container: HTMLElement | ShadowRoot, index = 0) {
   const input = container.querySelectorAll('input')[index];
   fireEvent.blur(input);
 
@@ -236,11 +236,9 @@ const dateFnsLocale = {
   generateConfig: dateFnsGenerateConfig,
 };
 
-type DateFnsSinglePickerProps = Omit<PickerProps<Date>, 'locale' | 'generateConfig'> & React.RefAttributes<PickerRef>;
+type DateFnsSinglePickerProps = Omit<PickerProps<Date>, 'locale' | 'generateConfig'> &
+  React.RefAttributes<PickerRef>;
 
 export const DateFnsSinglePicker = (props: DateFnsSinglePickerProps) => {
-  return <SinglePicker
-    {...dateFnsLocale}
-    {...props}
-  />
-}
\ No newline at end of file
+  return <SinglePicker {...dateFnsLocale} {...props} />;
+};