fix: cannot select end time in shadow dom

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} />;
+};