fix: Clear should also clear selected value

Author: zombieJ

assets/index.less

@@ -75,7 +75,7 @@
         transition: background 0.3s, border 0.3s;
 
         &:hover {
-          background: fade(blue, 30%)!important;
+          background: fade(blue, 30%) !important;
         }
       }
 
@@ -221,6 +221,7 @@
   // ======================== Input =========================
   &-input {
     position: relative;
+    display: inline;
   }
 
   &-clear {

examples/basic.tsx

@@ -103,6 +103,14 @@ export default () => {
           <h3>Basic</h3>
           <Picker<Moment> {...sharedProps} locale={zhCN} />
         </div>
+        <div style={{ margin: '0 8px' }}>
+          <h3>Uncontrolled</h3>
+          <Picker<Moment>
+            generateConfig={momentGenerateConfig}
+            locale={zhCN}
+            allowClear
+          />
+        </div>
         <div style={{ margin: '0 8px' }}>
           <h3>Datetime</h3>
           <Picker<Moment>

examples/uncontrolled.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Moment } from 'moment';
+import Picker from '../src/Picker';
+import momentGenerateConfig from '../src/generate/moment';
+import zhCN from '../src/locale/zh_CN';
+import '../assets/index.less';
+
+export default () => (
+  <div>
+    <div style={{ margin: '0 8px' }}>
+      <h3>Uncontrolled</h3>
+      <Picker<Moment>
+        generateConfig={momentGenerateConfig}
+        locale={zhCN}
+        picker="week"
+        allowClear
+      />
+    </div>
+  </div>
+);

src/Picker.tsx

@@ -213,7 +213,9 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
 
   // =========================== Formatter ===========================
   const setSelectedValue = (newDate: DateType | null) => {
-    setDateText(newDate);
+    if (!isSameTextDate(textValue, newDate)) {
+      setDateText(newDate);
+    }
     setInternalSelectedValue(newDate);
   };
 
@@ -238,10 +240,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
 
   // ============================ Trigger ============================
   const triggerChange = (newValue: DateType | null) => {
-    if (!isSameTextDate(textValue, newValue)) {
-      setDateText(newValue);
-    }
-
+    setSelectedValue(newValue);
     setInnerValue(newValue);
 
     if (onChange && !isEqual(generateConfig, mergedValue, newValue)) {

tests/picker.spec.tsx

@@ -172,9 +172,18 @@ describe('Basic', () => {
 
   describe('typing to change value', () => {
     [
-      { name: 'basic', value: '2000-11-11' },
-      { name: 'week', picker: 'week', value: '2000-45th' },
-    ].forEach(({ name, picker, value }) => {
+      {
+        name: 'basic',
+        value: '2000-11-11',
+        selected: '.rc-picker-date-panel-cell-selected',
+      },
+      {
+        name: 'week',
+        picker: 'week',
+        value: '2000-45th',
+        selected: '.rc-picker-week-panel-row-selected',
+      },
+    ].forEach(({ name, picker, value, selected }) => {
       it(name, () => {
         const onChange = jest.fn();
         const wrapper = mount(
@@ -207,10 +216,14 @@ describe('Basic', () => {
         expect(
           isSame(onChange.mock.calls[0][0], '2000-11-11', picker as any),
         ).toBeTruthy();
+        expect(wrapper.find(selected).length).toBeTruthy();
         onChange.mockReset();
 
         wrapper.clearValue();
         expect(onChange).toHaveBeenCalledWith(null, '');
+
+        wrapper.openPicker();
+        expect(wrapper.find(selected).length).toBeFalsy();
       });
     });
   });