chore: fix removeIcon not working (#748)

react-component · Feb 1, 2024 · 5463f43 · 5463f43
1 parent a9e41e6
commit 5463f43
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 0 deletions.
diff --git a/src/PickerInput/Selector/SingleSelector/index.tsx b/src/PickerInput/Selector/SingleSelector/index.tsx
@@ -30,6 +30,8 @@ export interface SingleSelectorProps<DateType extends object = any>
   // Invalid
   invalid: boolean;
   onInvalid: (valid: boolean) => void;
+
+  removeIcon?: React.ReactNode;
 }
 
 function SingleSelector<DateType extends object = any>(
@@ -98,6 +100,8 @@ function SingleSelector<DateType extends object = any>(
     'aria-required': ariaRequired,
     autoFocus,
 
+    removeIcon,
+
     ...restProps
   } = props;
 
@@ -165,6 +169,7 @@ function SingleSelector<DateType extends object = any>(
         formatDate={getText}
         maxTagCount={maxTagCount}
         disabled={disabled}
+        removeIcon={removeIcon}
       />
       <input
         className={`${prefixCls}-multiple-input`}

diff --git a/src/PickerInput/SinglePicker.tsx b/src/PickerInput/SinglePicker.tsx
@@ -41,6 +41,7 @@ export interface BasePickerProps<DateType extends object = any>
 
   /** Not support `time` or `datetime` picker */
   multiple?: boolean;
+  removeIcon?: React.ReactNode;
   /** Only work when `multiple` is in used */
   maxTagCount?: number | 'responsive';
 
@@ -167,6 +168,7 @@ function Picker<DateType extends object = any>(
     inputReadOnly,
 
     suffixIcon,
+    removeIcon,
 
     // Focus
     onFocus,
@@ -620,6 +622,7 @@ function Picker<DateType extends object = any>(
           ref={selectorRef}
           // Icon
           suffixIcon={suffixIcon}
+          removeIcon={removeIcon}
           // Active
           activeHelp={!!internalHoverValue}
           allHelp={!!internalHoverValue && hoverSource === 'preset'}

diff --git a/tests/multiple.spec.tsx b/tests/multiple.spec.tsx
@@ -125,4 +125,16 @@ describe('Picker.Multiple', () => {
     rerender(renderDemo(false));
     expect(container.querySelector('.rc-picker-clear')).toBeFalsy();
   });
+
+  it('removeIcon', () => {
+    const { container } = render(
+      <DayPicker
+        multiple
+        defaultValue={[getDay('2000-01-01')]}
+        removeIcon={<span className="custom-remove">Remove</span>}
+      />,
+    );
+
+    expect(container.querySelector('.custom-remove')).toBeTruthy();
+  });
 });