From 55134b0415bb7b409072b44ae77de1021d558273 Mon Sep 17 00:00:00 2001
From: Kermit <kermitlx@outlook.com>
Date: Fri, 24 Jul 2020 16:53:25 +0800
Subject: [PATCH 1/4] chore(hoverPlaceholder): optmize logic when value is not
 empty

---
 assets/index.less                | 24 ++++++++++++++++++++
 src/Picker.tsx                   | 12 +++++++---
 src/RangePicker.tsx              | 12 ++++++----
 src/hooks/useHoverPlaceholder.ts | 10 ++++-----
 tests/picker.spec.tsx            | 37 ++++++++++++++++++++++++++++++-
 tests/range.spec.tsx             | 38 +++++++++++++++++++++++++++++++-
 6 files changed, 119 insertions(+), 14 deletions(-)

diff --git a/assets/index.less b/assets/index.less
index fddf02b28..ad35abae7 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -2,6 +2,23 @@
 
 @background-color: rgb(255, 240, 255);
 
+@input-placeholder-color: hsv(0, 0, 75%);
+
+.placeholder(@color: @input-placeholder-color) {
+  // Firefox
+  &::-moz-placeholder {
+    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
+  }
+
+  &::placeholder {
+    color: @color;
+  }
+
+  &:placeholder-shown {
+    text-overflow: ellipsis;
+  }
+}
+
 .@{prefix-cls} {
   display: inline-flex;
 
@@ -292,6 +309,13 @@
 
     > input {
       width: 100%;
+      .placeholder();
+    }
+
+    &-placeholder {
+      > input {
+        color: @input-placeholder-color;
+      }
     }
   }
 
diff --git a/src/Picker.tsx b/src/Picker.tsx
index 5873b1352..731d34c28 100644
--- a/src/Picker.tsx
+++ b/src/Picker.tsx
@@ -436,7 +436,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
   };
   const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
 
-  const [hoverPlaceholder, onEnter, onLeave] = useHoverPlaceholder(placeholder, text, {
+  const [hoverPlaceholder, onEnter, onLeave, isHover] = useHoverPlaceholder(placeholder, text, {
     formatList,
     generateConfig,
     locale,
@@ -481,14 +481,20 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
           onContextMenu={onContextMenu}
           onClick={onClick}
         >
-          <div className={`${prefixCls}-input`} ref={inputDivRef}>
+          <div
+            className={classNames(`${prefixCls}-input`, {
+              [`${prefixCls}-input-placeholder`]: isHover,
+            })}
+            ref={inputDivRef}
+          >
             <input
               id={id}
               tabIndex={tabIndex}
               disabled={disabled}
               readOnly={inputReadOnly || !typing}
-              value={text}
+              value={text && isHover ? hoverPlaceholder : text}
               onChange={e => {
+                onLeave(null);
                 triggerTextChange(e.target.value);
               }}
               autoFocus={autoFocus}
diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx
index 31ba3e125..fc43f3dfd 100644
--- a/src/RangePicker.tsx
+++ b/src/RangePicker.tsx
@@ -540,7 +540,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
   // ========================== Hover Range ==========================
   const [hoverRangedValue, setHoverRangedValue] = useState<RangeValue<DateType>>(null);
 
-  const [startPlaceholder, onStartEnter, onStartLeave] = useHoverPlaceholder(
+  const [startPlaceholder, onStartEnter, onStartLeave, isStartHover] = useHoverPlaceholder(
     getValue(placeholder, 0) || '',
     startText,
     {
@@ -550,7 +550,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     },
   );
 
-  const [endPlaceholder, onEndEnter, onEndLeave] = useHoverPlaceholder(
+  const [endPlaceholder, onEndEnter, onEndLeave, isEndHover] = useHoverPlaceholder(
     getValue(placeholder, 1) || '',
     endText,
     {
@@ -1060,6 +1060,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
           <div
             className={classNames(`${prefixCls}-input`, {
               [`${prefixCls}-input-active`]: mergedActivePickerIndex === 0,
+              [`${prefixCls}-input-placeholder`]: isStartHover,
             })}
             ref={startInputDivRef}
           >
@@ -1067,8 +1068,9 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
               id={id}
               disabled={mergedDisabled[0]}
               readOnly={inputReadOnly || !startTyping}
-              value={startText}
+              value={startText && isStartHover ? startPlaceholder : startText}
               onChange={e => {
+                onStartLeave(null);
                 triggerStartTextChange(e.target.value);
               }}
               autoFocus={autoFocus}
@@ -1085,14 +1087,16 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
           <div
             className={classNames(`${prefixCls}-input`, {
               [`${prefixCls}-input-active`]: mergedActivePickerIndex === 1,
+              [`${prefixCls}-input-placeholder`]: isEndHover,
             })}
             ref={endInputDivRef}
           >
             <input
               disabled={mergedDisabled[1]}
               readOnly={inputReadOnly || !endTyping}
-              value={endText}
+              value={endText && isEndHover ? endPlaceholder : endText}
               onChange={e => {
+                onEndLeave(null);
                 triggerEndTextChange(e.target.value);
               }}
               placeholder={endPlaceholder}
diff --git a/src/hooks/useHoverPlaceholder.ts b/src/hooks/useHoverPlaceholder.ts
index cd2fcff60..a4de3f98a 100644
--- a/src/hooks/useHoverPlaceholder.ts
+++ b/src/hooks/useHoverPlaceholder.ts
@@ -5,7 +5,7 @@ export default function useHoverPlaceholder<DateType>(
   placeholder: string,
   text: string,
   { formatList, generateConfig, locale }: ValueTextConfig<DateType>,
-): [string, (date: DateType) => void, (date: DateType) => void] {
+): [string, (date: DateType) => void, (date: DateType) => void, boolean] {
   const [value, setValue] = useState(null);
 
   const [valueTexts] = useValueTexts(value, {
@@ -15,14 +15,14 @@ export default function useHoverPlaceholder<DateType>(
   });
 
   function onEnter(date: DateType) {
-    if (!text) {
-      setValue(date);
-    }
+    setValue(date);
   }
 
   function onLeave() {
     setValue(null);
   }
 
-  return [(valueTexts && valueTexts[0]) || placeholder, onEnter, onLeave];
+  const hoverPlaceholder = valueTexts && valueTexts[0];
+
+  return [hoverPlaceholder || placeholder, onEnter, onLeave, !!hoverPlaceholder];
 }
diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx
index 4544b4125..aedf82438 100644
--- a/tests/picker.spec.tsx
+++ b/tests/picker.spec.tsx
@@ -732,13 +732,46 @@ describe('Picker.Basic', () => {
 
   describe('hover placeholder', () => {
     const placeholder = 'custom placeholder';
-    it('placeholder should be origin value when input value is not empty', () => {
+    it('when input value is not empty', () => {
       const wrapper = mount(
         <MomentPicker placeholder={placeholder} open defaultValue={getMoment('2020-07-22')} />,
       );
       const cell = wrapper.findCell(24);
       cell.simulate('mouseEnter');
+      expect(wrapper.find('input').prop('placeholder')).toBe('2020-07-24');
+      expect(wrapper.find('input').prop('value')).toBe('2020-07-24');
+      expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeTruthy();
+
+      cell.simulate('mouseLeave');
+      expect(wrapper.find('input').prop('placeholder')).toBe(placeholder);
+      expect(wrapper.find('input').prop('value')).toBe('2020-07-22');
+      expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeFalsy();
+    });
+
+    it('change value when hovering', () => {
+      const wrapper = mount(
+        <MomentPicker placeholder={placeholder} open defaultValue={getMoment('2020-07-22')} />,
+      );
+      const cell = wrapper.findCell(24);
+      cell.simulate('mouseEnter');
+      expect(wrapper.find('input').prop('placeholder')).toBe('2020-07-24');
+      expect(wrapper.find('input').prop('value')).toBe('2020-07-24');
+      expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeTruthy();
+
+      wrapper.find('input').simulate('change', {
+        target: {
+          value: '2020-07-23',
+        },
+      });
+
+      expect(wrapper.find('input').prop('placeholder')).toBe(placeholder);
+      expect(wrapper.find('input').prop('value')).toBe('2020-07-23');
+      expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeFalsy();
+
+      wrapper.closePicker();
       expect(wrapper.find('input').prop('placeholder')).toBe(placeholder);
+      expect(wrapper.find('input').prop('value')).toBe('2020-07-23');
+      expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeFalsy();
     });
 
     it('placeholder should be target date when input value is empty', () => {
@@ -754,8 +787,10 @@ describe('Picker.Basic', () => {
       const cell = wrapper.findCell(24);
       cell.simulate('mouseEnter');
       expect(wrapper.find('input').prop('placeholder')).toBe('2020-07-24');
+      expect(wrapper.find('input').prop('value')).toBe('');
       cell.simulate('mouseLeave');
       expect(wrapper.find('input').prop('placeholder')).toBe(placeholder);
+      expect(wrapper.find('input').prop('value')).toBe('');
       wrapper.closePicker();
     });
   });
diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx
index 6ca193e76..a39f1f7f3 100644
--- a/tests/range.spec.tsx
+++ b/tests/range.spec.tsx
@@ -1431,7 +1431,7 @@ describe('Picker.Range', () => {
     const placeholder: [string, string] = ['custom placeholder1', 'custom placeholder2'];
     const defaultValue: [Moment, Moment] = [getMoment('2020-07-22'), getMoment('2020-08-22')];
 
-    it('placeholder should be target date when input value is empty', () => {
+    it('when input value is empty', () => {
       const wrapper = mount(
         <MomentRangePicker placeholder={placeholder} defaultValue={defaultValue} />,
       );
@@ -1446,12 +1446,24 @@ describe('Picker.Range', () => {
           .first()
           .prop('placeholder'),
       ).toBe('2020-07-24');
+      expect(
+        wrapper
+          .find('input')
+          .first()
+          .prop('value'),
+      ).toBe('');
       expect(
         wrapper
           .find('input')
           .last()
           .prop('placeholder'),
       ).toBe(placeholder[1]);
+      expect(
+        wrapper
+          .find('input')
+          .last()
+          .prop('value'),
+      ).toBe('2020-08-22');
       leftCell.simulate('mouseLeave');
       expect(
         wrapper
@@ -1465,6 +1477,18 @@ describe('Picker.Range', () => {
           .last()
           .prop('placeholder'),
       ).toBe(placeholder[1]);
+      expect(
+        wrapper
+          .find('input')
+          .first()
+          .prop('value'),
+      ).toBe('');
+      expect(
+        wrapper
+          .find('input')
+          .last()
+          .prop('value'),
+      ).toBe('2020-08-22');
       wrapper.closePicker(0);
 
       // right
@@ -1485,6 +1509,18 @@ describe('Picker.Range', () => {
           .first()
           .prop('placeholder'),
       ).toBe(placeholder[0]);
+      expect(
+        wrapper
+          .find('input')
+          .first()
+          .prop('value'),
+      ).toBe('2020-07-22');
+      expect(
+        wrapper
+          .find('input')
+          .last()
+          .prop('value'),
+      ).toBe('');
       rightCell.simulate('mouseLeave');
       expect(
         wrapper

From 6a7da7d1f702b8f89e2f482882bdd048158b5bcc Mon Sep 17 00:00:00 2001
From: Kermit <kermitlx@outlook.com>
Date: Sat, 25 Jul 2020 15:37:35 +0800
Subject: [PATCH 2/4] refactor: useHoverPlaceholder to useHoverValue

---
 src/Picker.tsx                   |  10 +--
 src/RangePicker.tsx              |  42 ++++++-------
 src/hooks/useHoverPlaceholder.ts |  28 ---------
 src/hooks/useHoverValue.ts       |  29 +++++++++
 tests/picker.spec.tsx            |  52 ++++++----------
 tests/range.spec.tsx             | 101 ++++++++++++++++---------------
 6 files changed, 122 insertions(+), 140 deletions(-)
 delete mode 100644 src/hooks/useHoverPlaceholder.ts
 create mode 100644 src/hooks/useHoverValue.ts

diff --git a/src/Picker.tsx b/src/Picker.tsx
index 731d34c28..8ac45d89d 100644
--- a/src/Picker.tsx
+++ b/src/Picker.tsx
@@ -30,7 +30,7 @@ import { getDefaultFormat, getInputSize, elementsContains } from './utils/uiUtil
 import usePickerInput from './hooks/usePickerInput';
 import useTextValueMapping from './hooks/useTextValueMapping';
 import useValueTexts from './hooks/useValueTexts';
-import useHoverPlaceholder from './hooks/useHoverPlaceholder';
+import useHoverValue from './hooks/useHoverValue';
 
 export interface PickerRefConfig {
   focus: () => void;
@@ -436,7 +436,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
   };
   const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
 
-  const [hoverPlaceholder, onEnter, onLeave, isHover] = useHoverPlaceholder(placeholder, text, {
+  const [hoverValue, onEnter, onLeave] = useHoverValue(text, {
     formatList,
     generateConfig,
     locale,
@@ -483,7 +483,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
         >
           <div
             className={classNames(`${prefixCls}-input`, {
-              [`${prefixCls}-input-placeholder`]: isHover,
+              [`${prefixCls}-input-placeholder`]: !!hoverValue,
             })}
             ref={inputDivRef}
           >
@@ -492,13 +492,13 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
               tabIndex={tabIndex}
               disabled={disabled}
               readOnly={inputReadOnly || !typing}
-              value={text && isHover ? hoverPlaceholder : text}
+              value={hoverValue || text}
               onChange={e => {
                 onLeave(null);
                 triggerTextChange(e.target.value);
               }}
               autoFocus={autoFocus}
-              placeholder={hoverPlaceholder}
+              placeholder={placeholder}
               ref={inputRef}
               title={text}
               {...inputProps}
diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx
index fc43f3dfd..44609c675 100644
--- a/src/RangePicker.tsx
+++ b/src/RangePicker.tsx
@@ -29,7 +29,7 @@ import getExtraFooter from './utils/getExtraFooter';
 import getRanges from './utils/getRanges';
 import useRangeViewDates from './hooks/useRangeViewDates';
 import { DateRender } from './panels/DatePanel/DateBody';
-import useHoverPlaceholder from './hooks/useHoverPlaceholder';
+import useHoverValue from './hooks/useHoverValue';
 
 function reorderValues<DateType>(
   values: RangeValue<DateType>,
@@ -540,25 +540,17 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
   // ========================== Hover Range ==========================
   const [hoverRangedValue, setHoverRangedValue] = useState<RangeValue<DateType>>(null);
 
-  const [startPlaceholder, onStartEnter, onStartLeave, isStartHover] = useHoverPlaceholder(
-    getValue(placeholder, 0) || '',
-    startText,
-    {
-      formatList,
-      generateConfig,
-      locale,
-    },
-  );
+  const [startHoverValue, onStartEnter, onStartLeave] = useHoverValue(startText, {
+    formatList,
+    generateConfig,
+    locale,
+  });
 
-  const [endPlaceholder, onEndEnter, onEndLeave, isEndHover] = useHoverPlaceholder(
-    getValue(placeholder, 1) || '',
-    endText,
-    {
-      formatList,
-      generateConfig,
-      locale,
-    },
-  );
+  const [endHoverValue, onEndEnter, onEndLeave] = useHoverValue(endText, {
+    formatList,
+    generateConfig,
+    locale,
+  });
 
   const onDateMouseEnter = (date: DateType) => {
     setHoverRangedValue(updateValues(selectedValue, date, mergedActivePickerIndex));
@@ -1060,7 +1052,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
           <div
             className={classNames(`${prefixCls}-input`, {
               [`${prefixCls}-input-active`]: mergedActivePickerIndex === 0,
-              [`${prefixCls}-input-placeholder`]: isStartHover,
+              [`${prefixCls}-input-placeholder`]: !!startHoverValue,
             })}
             ref={startInputDivRef}
           >
@@ -1068,13 +1060,13 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
               id={id}
               disabled={mergedDisabled[0]}
               readOnly={inputReadOnly || !startTyping}
-              value={startText && isStartHover ? startPlaceholder : startText}
+              value={startHoverValue || startText}
               onChange={e => {
                 onStartLeave(null);
                 triggerStartTextChange(e.target.value);
               }}
               autoFocus={autoFocus}
-              placeholder={startPlaceholder}
+              placeholder={getValue(placeholder, 0) || ''}
               ref={startInputRef}
               {...startInputProps}
               {...inputSharedProps}
@@ -1087,19 +1079,19 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
           <div
             className={classNames(`${prefixCls}-input`, {
               [`${prefixCls}-input-active`]: mergedActivePickerIndex === 1,
-              [`${prefixCls}-input-placeholder`]: isEndHover,
+              [`${prefixCls}-input-placeholder`]: !!endHoverValue,
             })}
             ref={endInputDivRef}
           >
             <input
               disabled={mergedDisabled[1]}
               readOnly={inputReadOnly || !endTyping}
-              value={endText && isEndHover ? endPlaceholder : endText}
+              value={endHoverValue || endText}
               onChange={e => {
                 onEndLeave(null);
                 triggerEndTextChange(e.target.value);
               }}
-              placeholder={endPlaceholder}
+              placeholder={getValue(placeholder, 1) || ''}
               ref={endInputRef}
               {...endInputProps}
               {...inputSharedProps}
diff --git a/src/hooks/useHoverPlaceholder.ts b/src/hooks/useHoverPlaceholder.ts
deleted file mode 100644
index a4de3f98a..000000000
--- a/src/hooks/useHoverPlaceholder.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useState } from 'react';
-import useValueTexts, { ValueTextConfig } from './useValueTexts';
-
-export default function useHoverPlaceholder<DateType>(
-  placeholder: string,
-  text: string,
-  { formatList, generateConfig, locale }: ValueTextConfig<DateType>,
-): [string, (date: DateType) => void, (date: DateType) => void, boolean] {
-  const [value, setValue] = useState(null);
-
-  const [valueTexts] = useValueTexts(value, {
-    formatList,
-    generateConfig,
-    locale,
-  });
-
-  function onEnter(date: DateType) {
-    setValue(date);
-  }
-
-  function onLeave() {
-    setValue(null);
-  }
-
-  const hoverPlaceholder = valueTexts && valueTexts[0];
-
-  return [hoverPlaceholder || placeholder, onEnter, onLeave, !!hoverPlaceholder];
-}
diff --git a/src/hooks/useHoverValue.ts b/src/hooks/useHoverValue.ts
new file mode 100644
index 000000000..b4135f9a0
--- /dev/null
+++ b/src/hooks/useHoverValue.ts
@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import useValueTexts, { ValueTextConfig } from './useValueTexts';
+
+export default function useHoverValue<DateType>(
+  valueText: string,
+  { formatList, generateConfig, locale }: ValueTextConfig<DateType>,
+): [string, (date: DateType) => void, (date: DateType) => void] {
+  const [value, setValue] = useState(null);
+
+  const [, firstText] = useValueTexts(value, {
+    formatList,
+    generateConfig,
+    locale,
+  });
+
+  function onEnter(date: DateType) {
+    setValue(date);
+  }
+
+  function onLeave() {
+    setValue(null);
+  }
+
+  useEffect(() => {
+    onLeave();
+  }, [valueText]);
+
+  return [firstText, onEnter, onLeave];
+}
diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx
index aedf82438..5eb625a80 100644
--- a/tests/picker.spec.tsx
+++ b/tests/picker.spec.tsx
@@ -730,31 +730,37 @@ describe('Picker.Basic', () => {
     expect(wrapper.render()).toMatchSnapshot();
   });
 
-  describe('hover placeholder', () => {
-    const placeholder = 'custom placeholder';
-    it('when input value is not empty', () => {
-      const wrapper = mount(
-        <MomentPicker placeholder={placeholder} open defaultValue={getMoment('2020-07-22')} />,
-      );
+  describe('hover value', () => {
+    it('should restore when leave', () => {
+      const wrapper = mount(<MomentPicker open defaultValue={getMoment('2020-07-22')} />);
       const cell = wrapper.findCell(24);
       cell.simulate('mouseEnter');
-      expect(wrapper.find('input').prop('placeholder')).toBe('2020-07-24');
       expect(wrapper.find('input').prop('value')).toBe('2020-07-24');
       expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeTruthy();
 
       cell.simulate('mouseLeave');
-      expect(wrapper.find('input').prop('placeholder')).toBe(placeholder);
       expect(wrapper.find('input').prop('value')).toBe('2020-07-22');
       expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeFalsy();
     });
 
+    it('should restore after selecting cell', () => {
+      const wrapper = mount(<MomentPicker defaultValue={getMoment('2020-07-22')} />);
+      wrapper.openPicker();
+      const cell = wrapper.findCell(24);
+      cell.simulate('mouseEnter');
+      expect(wrapper.find('input').prop('value')).toBe('2020-07-24');
+      expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeTruthy();
+
+      wrapper.selectCell(24);
+      expect(wrapper.find('input').prop('value')).toBe('2020-07-24');
+      expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeFalsy();
+    });
+
     it('change value when hovering', () => {
-      const wrapper = mount(
-        <MomentPicker placeholder={placeholder} open defaultValue={getMoment('2020-07-22')} />,
-      );
+      const wrapper = mount(<MomentPicker defaultValue={getMoment('2020-07-22')} />);
+      wrapper.openPicker();
       const cell = wrapper.findCell(24);
       cell.simulate('mouseEnter');
-      expect(wrapper.find('input').prop('placeholder')).toBe('2020-07-24');
       expect(wrapper.find('input').prop('value')).toBe('2020-07-24');
       expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeTruthy();
 
@@ -764,34 +770,12 @@ describe('Picker.Basic', () => {
         },
       });
 
-      expect(wrapper.find('input').prop('placeholder')).toBe(placeholder);
       expect(wrapper.find('input').prop('value')).toBe('2020-07-23');
       expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeFalsy();
 
       wrapper.closePicker();
-      expect(wrapper.find('input').prop('placeholder')).toBe(placeholder);
       expect(wrapper.find('input').prop('value')).toBe('2020-07-23');
       expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeFalsy();
     });
-
-    it('placeholder should be target date when input value is empty', () => {
-      const wrapper = mount(
-        <MomentPicker placeholder={placeholder} defaultValue={getMoment('2020-07-22')} />,
-      );
-      wrapper.openPicker();
-      wrapper.find('input').simulate('change', {
-        target: {
-          value: '',
-        },
-      });
-      const cell = wrapper.findCell(24);
-      cell.simulate('mouseEnter');
-      expect(wrapper.find('input').prop('placeholder')).toBe('2020-07-24');
-      expect(wrapper.find('input').prop('value')).toBe('');
-      cell.simulate('mouseLeave');
-      expect(wrapper.find('input').prop('placeholder')).toBe(placeholder);
-      expect(wrapper.find('input').prop('value')).toBe('');
-      wrapper.closePicker();
-    });
   });
 });
diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx
index a39f1f7f3..da44b9b75 100644
--- a/tests/range.spec.tsx
+++ b/tests/range.spec.tsx
@@ -1428,113 +1428,118 @@ describe('Picker.Range', () => {
   });
 
   describe('hover placeholder', () => {
-    const placeholder: [string, string] = ['custom placeholder1', 'custom placeholder2'];
     const defaultValue: [Moment, Moment] = [getMoment('2020-07-22'), getMoment('2020-08-22')];
 
-    it('when input value is empty', () => {
-      const wrapper = mount(
-        <MomentRangePicker placeholder={placeholder} defaultValue={defaultValue} />,
-      );
-      wrapper.openPicker(0);
-      wrapper.inputValue('');
+    it('should restore after selecting cell', () => {
+      const wrapper = mount(<MomentRangePicker defaultValue={defaultValue} />);
       // left
-      const leftCell = wrapper.findCell('24');
+      wrapper.openPicker(0);
+      const leftCell = wrapper.findCell(24, 0);
       leftCell.simulate('mouseEnter');
-      expect(
-        wrapper
-          .find('input')
-          .first()
-          .prop('placeholder'),
-      ).toBe('2020-07-24');
       expect(
         wrapper
           .find('input')
           .first()
           .prop('value'),
-      ).toBe('');
-      expect(
-        wrapper
-          .find('input')
-          .last()
-          .prop('placeholder'),
-      ).toBe(placeholder[1]);
+      ).toBe('2020-07-24');
       expect(
         wrapper
           .find('input')
           .last()
           .prop('value'),
       ).toBe('2020-08-22');
-      leftCell.simulate('mouseLeave');
       expect(
         wrapper
-          .find('input')
+          .find('.rc-picker-input')
           .first()
-          .prop('placeholder'),
-      ).toBe(placeholder[0]);
+          .hasClass('rc-picker-input-placeholder'),
+      ).toBeTruthy();
       expect(
         wrapper
-          .find('input')
+          .find('.rc-picker-input')
           .last()
-          .prop('placeholder'),
-      ).toBe(placeholder[1]);
+          .hasClass('rc-picker-input-placeholder'),
+      ).toBeFalsy();
+
+      wrapper.selectCell(24, 0);
       expect(
         wrapper
           .find('input')
           .first()
           .prop('value'),
-      ).toBe('');
+      ).toBe('2020-07-24');
       expect(
         wrapper
           .find('input')
           .last()
           .prop('value'),
       ).toBe('2020-08-22');
-      wrapper.closePicker(0);
+      expect(
+        wrapper
+          .find('.rc-picker-input')
+          .first()
+          .hasClass('rc-picker-input-placeholder'),
+      ).toBeFalsy();
+      expect(
+        wrapper
+          .find('.rc-picker-input')
+          .last()
+          .hasClass('rc-picker-input-placeholder'),
+      ).toBeFalsy();
 
       // right
-      wrapper.openPicker(1);
-      wrapper.inputValue('', 1);
-
-      const rightCell = wrapper.findCell('24', 1);
+      const rightCell = wrapper.findCell(24, 1);
       rightCell.simulate('mouseEnter');
+      expect(
+        wrapper
+          .find('input')
+          .first()
+          .prop('value'),
+      ).toBe('2020-07-24');
       expect(
         wrapper
           .find('input')
           .last()
-          .prop('placeholder'),
+          .prop('value'),
       ).toBe('2020-08-24');
       expect(
         wrapper
-          .find('input')
+          .find('.rc-picker-input')
           .first()
-          .prop('placeholder'),
-      ).toBe(placeholder[0]);
+          .hasClass('rc-picker-input-placeholder'),
+      ).toBeFalsy();
+      expect(
+        wrapper
+          .find('.rc-picker-input')
+          .last()
+          .hasClass('rc-picker-input-placeholder'),
+      ).toBeTruthy();
+
+      wrapper.selectCell(24, 1);
       expect(
         wrapper
           .find('input')
           .first()
           .prop('value'),
-      ).toBe('2020-07-22');
+      ).toBe('2020-07-24');
       expect(
         wrapper
           .find('input')
           .last()
           .prop('value'),
-      ).toBe('');
-      rightCell.simulate('mouseLeave');
+      ).toBe('2020-08-24');
       expect(
         wrapper
-          .find('input')
+          .find('.rc-picker-input')
           .first()
-          .prop('placeholder'),
-      ).toBe(placeholder[0]);
+          .hasClass('rc-picker-input-placeholder'),
+      ).toBeFalsy();
       expect(
         wrapper
-          .find('input')
+          .find('.rc-picker-input')
           .last()
-          .prop('placeholder'),
-      ).toBe(placeholder[1]);
-      wrapper.closePicker(1);
+          .hasClass('rc-picker-input-placeholder'),
+      ).toBeFalsy();
     });
   });
 });

From 1268c261219cca6d0ee09f4b42f0fcad4cf006a7 Mon Sep 17 00:00:00 2001
From: Kermit <kermitlx@outlook.com>
Date: Sat, 25 Jul 2020 15:50:19 +0800
Subject: [PATCH 3/4] test: add case for RangePicker

---
 tests/range.spec.tsx | 118 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 118 insertions(+)

diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx
index da44b9b75..da94d5f8e 100644
--- a/tests/range.spec.tsx
+++ b/tests/range.spec.tsx
@@ -1430,6 +1430,124 @@ describe('Picker.Range', () => {
   describe('hover placeholder', () => {
     const defaultValue: [Moment, Moment] = [getMoment('2020-07-22'), getMoment('2020-08-22')];
 
+    it('should restore when leave', () => {
+      const wrapper = mount(<MomentRangePicker defaultValue={defaultValue} />);
+
+      // left
+      wrapper.openPicker(0);
+      const leftCell = wrapper.findCell(24);
+      leftCell.simulate('mouseEnter');
+      expect(
+        wrapper
+          .find('input')
+          .first()
+          .prop('value'),
+      ).toBe('2020-07-24');
+      expect(
+        wrapper
+          .find('input')
+          .last()
+          .prop('value'),
+      ).toBe('2020-08-22');
+      expect(
+        wrapper
+          .find('.rc-picker-input')
+          .first()
+          .hasClass('rc-picker-input-placeholder'),
+      ).toBeTruthy();
+      expect(
+        wrapper
+          .find('.rc-picker-input')
+          .last()
+          .hasClass('rc-picker-input-placeholder'),
+      ).toBeFalsy();
+
+      leftCell.simulate('mouseLeave');
+      expect(
+        wrapper
+          .find('input')
+          .first()
+          .prop('value'),
+      ).toBe('2020-07-22');
+      expect(
+        wrapper
+          .find('input')
+          .last()
+          .prop('value'),
+      ).toBe('2020-08-22');
+      expect(
+        wrapper
+          .find('.rc-picker-input')
+          .first()
+          .hasClass('rc-picker-input-placeholder'),
+      ).toBeFalsy();
+      expect(
+        wrapper
+          .find('.rc-picker-input')
+          .last()
+          .hasClass('rc-picker-input-placeholder'),
+      ).toBeFalsy();
+
+      wrapper.closePicker(0);
+
+      // right
+      wrapper.openPicker(1);
+      const rightCell = wrapper.findCell(24, 1);
+      rightCell.simulate('mouseEnter');
+      expect(
+        wrapper
+          .find('input')
+          .first()
+          .prop('value'),
+      ).toBe('2020-07-22');
+      expect(
+        wrapper
+          .find('input')
+          .last()
+          .prop('value'),
+      ).toBe('2020-08-24');
+      expect(
+        wrapper
+          .find('.rc-picker-input')
+          .first()
+          .hasClass('rc-picker-input-placeholder'),
+      ).toBeFalsy();
+      expect(
+        wrapper
+          .find('.rc-picker-input')
+          .last()
+          .hasClass('rc-picker-input-placeholder'),
+      ).toBeTruthy();
+
+      rightCell.simulate('mouseLeave');
+      expect(
+        wrapper
+          .find('input')
+          .first()
+          .prop('value'),
+      ).toBe('2020-07-22');
+      expect(
+        wrapper
+          .find('input')
+          .last()
+          .prop('value'),
+      ).toBe('2020-08-22');
+      expect(
+        wrapper
+          .find('.rc-picker-input')
+          .first()
+          .hasClass('rc-picker-input-placeholder'),
+      ).toBeFalsy();
+      expect(
+        wrapper
+          .find('.rc-picker-input')
+          .last()
+          .hasClass('rc-picker-input-placeholder'),
+      ).toBeFalsy();
+
+      wrapper.closePicker(1);
+    });
+
     it('should restore after selecting cell', () => {
       const wrapper = mount(<MomentRangePicker defaultValue={defaultValue} />);
       // left

From d1262f433a655940c45da3a9a4f10d5c2315564f Mon Sep 17 00:00:00 2001
From: Kermit <kermitlx@outlook.com>
Date: Sat, 25 Jul 2020 15:56:41 +0800
Subject: [PATCH 4/4] chore(hoverValue): optimize onChange for input

---
 src/Picker.tsx      | 1 -
 src/RangePicker.tsx | 2 --
 2 files changed, 3 deletions(-)

diff --git a/src/Picker.tsx b/src/Picker.tsx
index 8ac45d89d..b4850ba54 100644
--- a/src/Picker.tsx
+++ b/src/Picker.tsx
@@ -494,7 +494,6 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
               readOnly={inputReadOnly || !typing}
               value={hoverValue || text}
               onChange={e => {
-                onLeave(null);
                 triggerTextChange(e.target.value);
               }}
               autoFocus={autoFocus}
diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx
index 44609c675..d985dd362 100644
--- a/src/RangePicker.tsx
+++ b/src/RangePicker.tsx
@@ -1062,7 +1062,6 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
               readOnly={inputReadOnly || !startTyping}
               value={startHoverValue || startText}
               onChange={e => {
-                onStartLeave(null);
                 triggerStartTextChange(e.target.value);
               }}
               autoFocus={autoFocus}
@@ -1088,7 +1087,6 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
               readOnly={inputReadOnly || !endTyping}
               value={endHoverValue || endText}
               onChange={e => {
-                onEndLeave(null);
                 triggerEndTextChange(e.target.value);
               }}
               placeholder={getValue(placeholder, 1) || ''}