fix: fix #date-picker input change handling

dnbexperience · May 31, 2019 · 92e2154 · 92e2154
1 parent e650bd2
commit 92e2154
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 31 deletions.
diff --git a/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js b/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js
@@ -108,22 +108,20 @@ export default class DatePickerInput extends PureComponent {
       }
       if (isDisabled(state.endDate, props.minDate, props.maxDate)) {
         state.endDate = props.maxDate
-        // state.endDate = addDays(props.maxDate, -1)
-      }
-
-      // set the input values
-      if (DatePickerInput.isValidDate(state.startDate)) {
-        state._startDay = pad(format(state.startDate, 'D'), 2)
-        state._startMonth = pad(format(state.startDate, 'M'), 2)
-        state._startYear = format(state.startDate, 'YYYY')
-      }
-      if (DatePickerInput.isValidDate(state.endDate)) {
-        state._endDay = pad(format(state.endDate, 'D'), 2)
-        state._endMonth = pad(format(state.endDate, 'M'), 2)
-        state._endYear = format(state.endDate, 'YYYY')
       }
+      state._listenForPropChanges = true
+    }
+    // set the input values
+    if (DatePickerInput.isValidDate(state.startDate)) {
+      state._startDay = pad(format(state.startDate, 'D'), 2)
+      state._startMonth = pad(format(state.startDate, 'M'), 2)
+      state._startYear = format(state.startDate, 'YYYY')
+    }
+    if (DatePickerInput.isValidDate(state.endDate)) {
+      state._endDay = pad(format(state.endDate, 'D'), 2)
+      state._endMonth = pad(format(state.endDate, 'M'), 2)
+      state._endYear = format(state.endDate, 'YYYY')
     }
-    state._listenForPropChanges = true
     return state
   }
 
@@ -330,7 +328,7 @@ export default class DatePickerInput extends PureComponent {
 
   setDate = (event, count, mode, type, fn) => {
     try {
-      let value = event.currentTarget.value
+      let value = event.target.value
       if (
         parseFloat(value) > 0 &&
         new RegExp(`[0-9]{${count}}`).test(value)
@@ -384,18 +382,6 @@ export default class DatePickerInput extends PureComponent {
   generateDateList(params, mode) {
     return this.maskList.map((value, i) => {
       const state = value.slice(0, 1)
-      // let type = null
-      // switch (state) {
-      //   case 'd':
-      //     type = 'Day'
-      //     break
-      //   case 'm':
-      //     type = 'Month'
-      //     break
-      //   case 'y':
-      //     type = 'Year'
-      //     break
-      // }
       const index = this.props.maskOrder.indexOf(value)
       const placeholderChar = this.props.maskPlaceholder[index]
       if (!this.props.separatorRexExp.test(value)) {
@@ -412,11 +398,9 @@ export default class DatePickerInput extends PureComponent {
           },
           onBlur: () => {
             this.setState({
-              // [`_${mode}${type}`]: event.currentTarget.value,
               focusState: 'blur',
               _listenForPropChanges: false
             })
-            // this[`set_${mode}${type}`](event)
           },
           placeholderChar
         }
@@ -537,8 +521,6 @@ export default class DatePickerInput extends PureComponent {
             icon="calendar"
             variant="secondary"
             on_submit={onSubmit}
-            // on_submit={this.onKeyUpHandler}
-            // onFocus={this.onKeyUpHandler}
             onKeyUp={this.onKeyUpHandler}
             {...rest}
           />

diff --git a/packages/dnb-ui-lib/src/components/date-picker/__tests__/DatePicker.test.js b/packages/dnb-ui-lib/src/components/date-picker/__tests__/DatePicker.test.js
@@ -93,6 +93,70 @@ describe('DatePicker component', () => {
     expect(Comp.find('.dnb-date-picker__calendar').length).toBe(2)
   })
 
+  it('has a reacting start date input with valid value', () => {
+    const elem = Comp.find('input.dnb-date-picker__input--day').at(0)
+
+    // by defualt we have the start day
+    expect(elem.instance().value).toBe('01')
+
+    // listen to changes
+    let changedStartDate = null
+    Comp.setProps({
+      on_change: ({ start_date }) => {
+        changedStartDate = start_date
+      }
+    })
+
+    // change the date
+    const value = '02'
+    elem.simulate('change', {
+      target: { value }
+    })
+
+    // then check the new input value
+    expect(elem.instance().value).toBe(value)
+
+    // and the event fired value
+    expect(changedStartDate).toBe(`2019-01-${value}`)
+
+    // reset the value
+    elem.simulate('change', {
+      target: { value: '01' }
+    })
+  })
+
+  it('has a reacting end date input with valid value', () => {
+    const elem = Comp.find('input.dnb-date-picker__input--day').at(1)
+
+    // by defualt we have the start day
+    expect(elem.instance().value).toBe('15')
+
+    // listen to changes
+    let changedStartDate = null
+    Comp.setProps({
+      on_change: ({ end_date }) => {
+        changedStartDate = end_date
+      }
+    })
+
+    // change the date
+    const value = '16'
+    elem.simulate('change', {
+      target: { value }
+    })
+
+    // then check the new input value
+    expect(elem.instance().value).toBe(value)
+
+    // and the event fired value
+    expect(changedStartDate).toBe(`2019-02-${value}`)
+
+    // reset the value
+    elem.simulate('change', {
+      target: { value: '15' }
+    })
+  })
+
   it('is displaying correct month', () => {
     expect(
       Comp.find('.dnb-date-picker__header__title')