fix(limel-date-picker): enable moving caret with keyboard

fix #306
Lundalogik · Sep 10, 2019 · 0c35f6f · 0c35f6f
1 parent 75ca714
commit 0c35f6f
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 2,328 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
   "dependencies": {
     "awesome-debounce-promise": "^2.1.0",
     "chart.js": "^2.7.3",
-    "flatpickr": "^4.5.2",
+    "flatpickr": "4.5.3-lime1",
     "jsx-dom": "^6.2.1",
     "lime-material-components-web": "0.43.1",
     "moment": "^2.24.0",

diff --git a/postinstall.js b/postinstall.js
@@ -1,19 +1,5 @@
 const fs = require('fs');
 
-// Copy pre-built version of flatpickr
-// TODO: remove this when a new version of flatpickr has been released
-fs.exists('src/dev-assets/hack/flatpickr.js', () => {
-    fs.copyFile(
-        'src/dev-assets/hack/flatpickr.js',
-        'node_modules/flatpickr/dist/flatpickr.js',
-        () => {
-            console.log(
-                'copied src/dev-assets/hack/flatpickr.js to node_modules'
-            );
-        }
-    );
-});
-
 // Remove type definitions for jsx-dom
 fs.exists('node_modules/jsx-dom/jsx-dom.d.ts', () => {
     fs.unlink('node_modules/jsx-dom/jsx-dom.d.ts', () => {

diff --git a/src/components/date-picker/pickers/Picker.ts b/src/components/date-picker/pickers/Picker.ts
@@ -48,7 +48,6 @@ export abstract class Picker {
             defaultDate: value,
             locale: FlatpickrLanguages[this.language] || 'en',
         };
-
         config = { ...config, ...this.getConfig(this.nativePicker) };
         this.flatpickr = flatpickr(element, config) as Instance; // tslint:disable-line:no-useless-cast
     }
@@ -73,23 +72,39 @@ export abstract class Picker {
     }
 
     protected handleClose(selectedDates) {
-        const momentInputDate = moment(
-            this.flatpickr.input.value,
-            this.dateFormat
-        );
         let pickerDate = selectedDates[0]
             ? new Date(selectedDates[0].toJSON())
             : null;
-        const isSameInput = momentInputDate.isSame(moment(pickerDate));
-        if (!isSameInput) {
-            if (momentInputDate.isValid()) {
-                pickerDate = momentInputDate.toDate();
-                this.flatpickr.setDate(pickerDate);
-            } else {
-                this.flatpickr.clear();
-            }
+        if (this.nativePicker) {
+            this.change.emit(pickerDate);
+        } else {
+            // With the changes in flatpickr between v4.5.2 and the state of
+            // the master branch when we created v4.5.3-lime1, this timeout
+            // had to be added to let `flatpickr.input.value` update before
+            // reading the value. /Ads
+            setTimeout(() => {
+                // We need to set the locale before parsing, in case the
+                // locale for this picker differs from the locale of the
+                // app as a whole. For some reason, the fact that we already
+                // set the locale in the Picker constructor doesn't affect
+                // the instance used here. /Ads
+                moment.locale(this.getMomentLang());
+                const momentInputDate = moment(
+                    this.flatpickr.input.value,
+                    this.dateFormat
+                );
+                const isSameInput = momentInputDate.isSame(moment(pickerDate));
+                if (!isSameInput) {
+                    if (momentInputDate.isValid()) {
+                        pickerDate = momentInputDate.toDate();
+                        this.flatpickr.setDate(pickerDate);
+                    } else {
+                        this.flatpickr.clear();
+                    }
+                }
+                this.change.emit(pickerDate);
+            }, 0);
         }
-        this.change.emit(pickerDate);
     }
 
     private getMomentLang() {