FIX: makes clicking and displaying date picker more reliable (#9302)

app/assets/javascripts/discourse/components/date-input.js

@@ -1,4 +1,4 @@
-import { next } from "@ember/runloop";
+import { schedule } from "@ember/runloop";
 import Component from "@ember/component";
 /* global Pikaday:true */
 import loadScript from "discourse/lib/load-script";
@@ -16,17 +16,19 @@ export default Component.extend({
 
   @on("didInsertElement")
   _loadDatePicker() {
-    const container = this.element.querySelector(`#${this.containerId}`);
+    schedule("afterRender", () => {
+      const container = this.element.querySelector(`#${this.containerId}`);
 
-    if (this.site.mobileView) {
-      this._loadNativePicker(container);
-    } else {
-      this._loadPikadayPicker(container);
-    }
+      if (this.site.mobileView) {
+        this._loadNativePicker(container);
+      } else {
+        this._loadPikadayPicker(container);
+      }
 
-    if (this.date && this._picker) {
-      this._picker.setDate(this.date, true);
-    }
+      if (this.date && this._picker) {
+        this._picker.setDate(this.date, true);
+      }
+    });
   },
 
   didUpdateAttrs() {
@@ -44,26 +46,25 @@ export default Component.extend({
 
   _loadPikadayPicker(container) {
     loadScript("/javascripts/pikaday.js").then(() => {
-      next(() => {
-        const default_opts = {
-          field: this.element.querySelector(".date-picker"),
-          container: container || this.element,
-          bound: container === null,
-          format: "LL",
-          firstDay: 1,
-          i18n: {
-            previousMonth: I18n.t("dates.previous_month"),
-            nextMonth: I18n.t("dates.next_month"),
-            months: moment.months(),
-            weekdays: moment.weekdays(),
-            weekdaysShort: moment.weekdaysShort()
-          },
-          onSelect: date => this._handleSelection(date)
-        };
+      const defaultOptions = {
+        field: this.element.querySelector(".date-picker"),
+        container: container || this.element.querySelector(".picker-container"),
+        bound: container === null,
+        format: "LL",
+        firstDay: 1,
+        trigger: this.element,
+        i18n: {
+          previousMonth: I18n.t("dates.previous_month"),
+          nextMonth: I18n.t("dates.next_month"),
+          months: moment.months(),
+          weekdays: moment.weekdays(),
+          weekdaysShort: moment.weekdaysShort()
+        },
+        onSelect: date => this._handleSelection(date)
+      };
 
-        this._picker = new Pikaday(Object.assign(default_opts, this._opts()));
-        this._picker.setDate(this.date, true);
-      });
+      this._picker = new Pikaday(Object.assign(defaultOptions, this._opts()));
+      this._picker.setDate(this.date, true);
     });
   },
 

app/assets/javascripts/discourse/templates/components/date-input.hbs

@@ -4,4 +4,7 @@
   placeholder=placeholder
   value=value
   input=(action "onInput")
+  readonly=true
 }}
+
+<div class="picker-container"></div>

app/assets/stylesheets/common/components/date-input.scss

@@ -1,8 +1,11 @@
 .d-date-input {
   display: flex;
   flex: 1;
+  cursor: pointer;
+  flex-direction: column;
 
   .date-picker {
+    cursor: pointer;
     margin: 0;
     text-align: left;
     width: 100%;