allow picker keyboard support from date input

react-component · Dec 15, 2018 · a2c2100 · a2c2100
1 parent f967996
commit a2c2100
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 27 deletions.
diff --git a/src/Calendar.jsx b/src/Calendar.jsx
@@ -67,9 +67,6 @@ const Calendar = createReactClass({
     }
   },
   onKeyDown(event) {
-    if (event.target.nodeName.toLowerCase() === 'input') {
-      return undefined;
-    }
     const keyCode = event.keyCode;
     // mac
     const ctrlKey = event.ctrlKey || event.metaKey;
@@ -129,7 +126,10 @@ const Calendar = createReactClass({
         event.preventDefault();
         return 1;
       default:
-        this.props.onKeyDown(event);
+        if (this.props.onKeyDown) {
+          this.props.onKeyDown(event);
+        }
+
         return 1;
     }
   },

diff --git a/src/date/DateInput.js b/src/date/DateInput.js
@@ -36,7 +36,10 @@ const DateInput = createReactClass({
     this.cachedSelectionEnd = this.dateInputInstance.selectionEnd;
     // when popup show, click body will call this, bug!
     const selectedValue = nextProps.selectedValue;
-    if (!this.state.hasFocus) {
+    const textValue = moment(this.dateInputInstance.value, nextProps.format, true);
+    const selectedValueChanged = selectedValue && !selectedValue.isSame(textValue);
+
+    if (!this.state.hasFocus || selectedValueChanged) {
       this.setState({
         str: formatDate(selectedValue, nextProps.format),
         invalid: false,
@@ -46,7 +49,7 @@ const DateInput = createReactClass({
 
   componentDidUpdate() {
     if (this.state.hasFocus && !this.state.invalid &&
-        !(this.cachedSelectionStart === 0 && this.cachedSelectionEnd === 0)) {
+      !(this.cachedSelectionStart === 0 && this.cachedSelectionEnd === 0)) {
       this.dateInputInstance.setSelectionRange(this.cachedSelectionStart, this.cachedSelectionEnd);
     }
   },
@@ -66,24 +69,15 @@ const DateInput = createReactClass({
     }
 
     // 不合法直接退出
-    const parsed = moment(str, format, true);
-    if (!parsed.isValid()) {
+    const value = moment(str, format, true);
+    if (!value.isValid()) {
       this.setState({
         invalid: true,
         str,
       });
       return;
     }
 
-    const value = this.props.value.clone();
-    value
-      .year(parsed.year())
-      .month(parsed.month())
-      .date(parsed.date())
-      .hour(parsed.hour())
-      .minute(parsed.minute())
-      .second(parsed.second());
-
     if (!value || (disabledDate && disabledDate(value))) {
       this.setState({
         invalid: true,
@@ -96,6 +90,7 @@ const DateInput = createReactClass({
       selectedValue && value && !selectedValue.isSame(value)
     )) {
       this.setState({
+        invalid: false,
         str,
       });
       onChange(value);
@@ -159,7 +154,7 @@ const DateInput = createReactClass({
             title={locale.clear}
             onClick={this.onClear}
           >
-            {clearIcon || <span className={`${prefixCls}-clear-btn`}/>}
+            {clearIcon || <span className={`${prefixCls}-clear-btn`} />}
           </a>
         ) : null}
       </div>

diff --git a/tests/Calendar.spec.jsx b/tests/Calendar.spec.jsx
@@ -34,7 +34,7 @@ describe('Calendar', () => {
     });
 
     it('render showToday false correctly', () => {
-      const wrapper = mount(<Calendar showToday={false}/>);
+      const wrapper = mount(<Calendar showToday={false} />);
       expect(wrapper.find('.rc-calendar-today-btn').length).toBe(0);
     });
   });
@@ -172,18 +172,11 @@ describe('Calendar', () => {
     let calendar;
     let input;
     beforeEach(() => {
-      calendar = mount(<Calendar showToday showWeekNumber/>);
+      calendar = mount(<Calendar showToday showWeekNumber />);
       input = calendar.find('.rc-calendar-input').hostNodes().at(0);
     });
 
     describe('keyboard works', () => {
-      it('ignore event from input', () => {
-        const original = calendar.state().value;
-        const expected = original.clone();
-        input.simulate('keyDown', { keyCode: keyCode.LEFT });
-        expect(calendar.state().value.date()).toBe(expected.date());
-      });
-
       it('triggers onKeyDown', () => {
         const handleKeyDown = jest.fn();
         calendar = mount(<Calendar showToday showWeekNumber onKeyDown={handleKeyDown} />);
@@ -530,6 +523,8 @@ describe('Calendar', () => {
 
       const input = calendar.find('.rc-calendar-input').hostNodes().at(0);
       input.simulate('focus');
+
+      input.instance().value = value;
       input.simulate('change', { target: { value } });
 
       let inputValue = calendar.find('.rc-calendar-input').props().value;