fix: cannot select end time in shadow dom (#860)

Author: shiyangzhaoa

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) {

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',
+    );
+  });
 });

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}
-  />
-}
+  return <SinglePicker {...dateFnsLocale} {...props} />;
+};