fix: RangePicker allowClear does not disable the clear button

components/date-picker/__tests__/DatePicker.test.tsx

@@ -5,11 +5,14 @@ import customParseFormat from 'dayjs/plugin/customParseFormat';
 import MockDate from 'mockdate';
 import dayJsGenerateConfig from 'rc-picker/lib/generate/dayjs';
 import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { CloseCircleFilled } from '@ant-design/icons';
 import DatePicker from '..';
 import focusTest from '../../../tests/shared/focusTest';
-import { fireEvent, render } from '../../../tests/utils';
+import { fireEvent, render, screen, waitFor } from '../../../tests/utils';
 import { resetWarned } from '../../_util/warning';
 import type { PickerLocale } from '../generatePicker';
+import { closeCircleByRole, expectCloseCircle } from './utils';
 
 dayjs.extend(customParseFormat);
 
@@ -312,4 +315,31 @@ describe('DatePicker', () => {
         .querySelectorAll('.ant-picker-time-panel-cell').length,
     ).toBe(60);
   });
+
+  it('allows or prohibits clearing as applicable', async () => {
+    const somepoint = dayjs('2023-08-01');
+    const { rerender } = render(<DatePicker value={somepoint} />);
+
+    const { role, options } = closeCircleByRole;
+    await userEvent.hover(screen.getByRole(role, options));
+    await waitFor(() => expectCloseCircle(true));
+
+    rerender(<DatePicker value={somepoint} allowClear={false} />);
+    await waitFor(() => expectCloseCircle(false));
+
+    rerender(<DatePicker value={somepoint} allowClear={{ clearIcon: <CloseCircleFilled /> }} />);
+    await waitFor(() => expectCloseCircle(true));
+
+    rerender(
+      <DatePicker
+        value={somepoint}
+        allowClear={{ clearIcon: <div data-testid="custom-clear" /> }}
+      />,
+    );
+    await waitFor(() => expectCloseCircle(false));
+    await userEvent.hover(screen.getByTestId('custom-clear'));
+
+    rerender(<DatePicker value={somepoint} allowClear={{}} />);
+    await waitFor(() => expectCloseCircle(true));
+  });
 });

components/date-picker/__tests__/RangePicker.test.tsx

@@ -2,13 +2,14 @@ import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import type { RangeValue } from 'rc-picker/lib/interface';
 import React, { useState } from 'react';
+import userEvent from '@testing-library/user-event';
+import { CloseCircleFilled } from '@ant-design/icons';
 import DatePicker from '..';
 import focusTest from '../../../tests/shared/focusTest';
-import { render, resetMockDate, setMockDate } from '../../../tests/utils';
+import { render, resetMockDate, setMockDate, screen, waitFor } from '../../../tests/utils';
 import { resetWarned } from '../../_util/warning';
 import enUS from '../locale/en_US';
-
-import { closePicker, openPicker, selectCell } from './utils';
+import { closeCircleByRole, expectCloseCircle, closePicker, openPicker, selectCell } from './utils';
 
 dayjs.extend(customParseFormat);
 
@@ -127,4 +128,38 @@ describe('RangePicker', () => {
 
     errSpy.mockRestore();
   });
+
+  it('allows or prohibits clearing as applicable', async () => {
+    const somepoint = dayjs('2023-08-01');
+    const { rerender } = render(<RangePicker locale={enUS} value={[somepoint, somepoint]} />);
+
+    const { role, options } = closeCircleByRole;
+    await userEvent.hover(screen.getByRole(role, options));
+    await waitFor(() => expectCloseCircle(true));
+
+    rerender(<RangePicker locale={enUS} value={[somepoint, somepoint]} allowClear={false} />);
+    await waitFor(() => expectCloseCircle(false));
+
+    rerender(
+      <RangePicker
+        locale={enUS}
+        value={[somepoint, somepoint]}
+        allowClear={{ clearIcon: <CloseCircleFilled /> }}
+      />,
+    );
+    await waitFor(() => expectCloseCircle(true));
+
+    rerender(
+      <RangePicker
+        locale={enUS}
+        value={[somepoint, somepoint]}
+        allowClear={{ clearIcon: <div data-testid="custom-clear" /> }}
+      />,
+    );
+    await waitFor(() => expectCloseCircle(false));
+    await userEvent.hover(screen.getByTestId('custom-clear'));
+
+    rerender(<RangePicker locale={enUS} value={[somepoint, somepoint]} allowClear={{}} />);
+    await waitFor(() => expectCloseCircle(true));
+  });
 });

components/date-picker/__tests__/utils.ts

@@ -1,5 +1,5 @@
 import type { render } from '../../../tests/utils';
-import { fireEvent } from '../../../tests/utils';
+import { fireEvent, screen } from '../../../tests/utils';
 
 export function openPicker(wrapper: ReturnType<typeof render>, index = 0) {
   fireEvent.mouseDown(wrapper.container?.querySelectorAll('input')?.[index]!);
@@ -25,3 +25,11 @@ export function selectCell(wrapper: ReturnType<typeof render>, text: string | nu
   }
   return matchCell;
 }
+
+export const closeCircleByRole = { role: 'img', options: { name: 'close-circle' } } as const;
+
+export function expectCloseCircle(shouldExist: boolean) {
+  const { role, options } = closeCircleByRole;
+  const count = shouldExist ? 1 : 0;
+  return expect(screen.queryAllByRole(role, options).length).toStrictEqual(count);
+}

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -18,7 +18,12 @@ import { useLocale } from '../../locale';
 import { useCompactItemContext } from '../../space/Compact';
 import enUS from '../locale/en_US';
 import useStyle from '../style';
-import { getRangePlaceholder, getTimeProps, transPlacement2DropdownAlign } from '../util';
+import {
+  getRangePlaceholder,
+  getTimeProps,
+  mergeAllowClear,
+  transPlacement2DropdownAlign,
+} from '../util';
 import Components from './Components';
 import type { CommonPickerMethods, PickerComponentClass } from './interface';
 
@@ -50,6 +55,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
       dropdownClassName,
       status: customStatus,
       clearIcon,
+      allowClear,
       ...restProps
     } = props;
 
@@ -141,7 +147,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
         components={Components}
         direction={direction}
         dropdownClassName={classNames(hashId, popupClassName || dropdownClassName)}
-        allowClear={{ clearIcon: clearIcon ?? <CloseCircleFilled /> }}
+        allowClear={mergeAllowClear(allowClear, clearIcon, <CloseCircleFilled />)}
       />,
     );
   });

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -19,7 +19,12 @@ import { useLocale } from '../../locale';
 import { useCompactItemContext } from '../../space/Compact';
 import enUS from '../locale/en_US';
 import useStyle from '../style';
-import { getPlaceholder, getTimeProps, transPlacement2DropdownAlign } from '../util';
+import {
+  getPlaceholder,
+  getTimeProps,
+  mergeAllowClear,
+  transPlacement2DropdownAlign,
+} from '../util';
 import Components from './Components';
 import type { CommonPickerMethods, DatePickRef, PickerComponentClass } from './interface';
 
@@ -55,6 +60,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
           disabled: customDisabled,
           status: customStatus,
           clearIcon,
+          allowClear,
           ...restProps
         } = props;
 
@@ -177,7 +183,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
               rootClassName,
               popupClassName || dropdownClassName,
             )}
-            allowClear={{ clearIcon: clearIcon ?? <CloseCircleFilled /> }}
+            allowClear={mergeAllowClear(allowClear, clearIcon, <CloseCircleFilled />)}
           />,
         );
       },

components/date-picker/util.ts

@@ -3,7 +3,7 @@ import type { PickerMode } from 'rc-picker/lib/interface';
 import type { SharedTimeProps } from 'rc-picker/lib/panels/TimePanel';
 import type { SelectCommonPlacement } from '../_util/motion';
 import type { DirectionType } from '../config-provider';
-import type { PickerLocale } from './generatePicker';
+import type { PickerLocale, PickerProps } from './generatePicker';
 
 export function getPlaceholder(
   locale: PickerLocale,
@@ -160,3 +160,19 @@ export function getTimeProps<DateType, DisabledTime>(
     showTime: showTimeObj,
   };
 }
+
+type AllowClear = PickerProps<unknown>['allowClear'];
+type ClearIcon = PickerProps<unknown>['clearIcon'];
+
+export function mergeAllowClear(
+  allowClear: AllowClear,
+  clearIcon: ClearIcon,
+  defaultClearIcon: NonNullable<ClearIcon>,
+) {
+  if (allowClear === false) {
+    return false;
+  }
+
+  const defaults = { clearIcon: clearIcon ?? defaultClearIcon };
+  return typeof allowClear === 'object' ? { ...defaults, ...allowClear } : defaults;
+}

components/time-picker/__tests__/__snapshots__/index.test.tsx.snap

@@ -41,31 +41,6 @@ exports[`TimePicker not render clean icon when allowClear is false 1`] = `
         </svg>
       </span>
     </span>
-    <span
-      class="ant-picker-clear"
-      role="button"
-    >
-      <span
-        aria-label="close-circle"
-        class="anticon anticon-close-circle"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="close-circle"
-          fill="currentColor"
-          fill-rule="evenodd"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-          />
-        </svg>
-      </span>
-    </span>
   </div>
 </div>
 `;