fix(DatePicker): make keyboard usage in input not throw (#1475)

dnbexperience · Jun 22, 2022 · d0756e2 · d0756e2
1 parent 5fcbf17
commit d0756e2
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 36 deletions.
diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerInput.js b/packages/dnb-eufemia/src/components/date-picker/DatePickerInput.js
@@ -259,47 +259,54 @@ export default class DatePickerInput extends React.PureComponent {
   }
 
   prepareCounting = async ({ keyCode, target, event }) => {
-    const isDate = target
-      .getAttribute('class')
-      .match(/__input--([day|month|year]+)($|\s)/)[1]
-    const isInRange = target
-      .getAttribute('id')
-      .match(/[0-9]-([start|end]+)-/)[1]
-
-    let date =
-      isInRange === 'start' ? this.context.startDate : this.context.endDate
-
-    // do nothing if date is not set yet
-    if (!date) {
-      return
-    }
-
-    const count = keyCode === 'up' ? 1 : -1
+    try {
+      const isDate = target
+        .getAttribute('class')
+        .match(/__input--([day|month|year]+)($|\s)/)[1]
+
+      const isInRange = target
+        .getAttribute('id')
+        .match(/-([start|end]+)-/)[1]
+
+      let date =
+        isInRange === 'start'
+          ? this.context.startDate
+          : this.context.endDate
+
+      // do nothing if date is not set yet
+      if (!date) {
+        return
+      }
 
-    if (keyCode === 'up' || keyCode === 'down') {
-      switch (isDate) {
-        case 'day':
-          date = addDays(date, count)
-          break
-        case 'month':
-          date = addMonths(date, count)
-          break
-        case 'year':
-          date = addYears(date, count)
-          break
+      const count = keyCode === 'up' ? 1 : -1
+
+      if (keyCode === 'up' || keyCode === 'down') {
+        switch (isDate) {
+          case 'day':
+            date = addDays(date, count)
+            break
+          case 'month':
+            date = addMonths(date, count)
+            break
+          case 'year':
+            date = addYears(date, count)
+            break
+        }
       }
-    }
 
-    this.callOnChange({
-      [isInRange === 'start' ? 'startDate' : 'endDate']: date,
-      event,
-    })
+      this.callOnChange({
+        [isInRange === 'start' ? 'startDate' : 'endDate']: date,
+        event,
+      })
 
-    await wait(1) // to get the correct position afterwards
+      await wait(1) // to get the correct position afterwards
 
-    const endPos = target.value.length
-    target.focus()
-    target.setSelectionRange(0, endPos)
+      const endPos = target.value.length
+      target.focus()
+      target.setSelectionRange(0, endPos)
+    } catch (e) {
+      warn(e)
+    }
   }
 
   onFocusHandler = (event) => {

diff --git a/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.js b/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.js
@@ -1029,6 +1029,7 @@ describe('DatePicker component', () => {
         range
         start_date={defaultProps.start_date}
         end_date={defaultProps.end_date}
+        id="unique-id"
       />,
       { attachTo: attachToBody() }
     )