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,6 +16,7 @@ export default Component.extend({
 
   @on("didInsertElement")
   _loadDatePicker() {
+    schedule("afterRender", () => {
       const container = this.element.querySelector(`#${this.containerId}`);
 
       if (this.site.mobileView) {
@@ -27,6 +28,7 @@ export default Component.extend({
       if (this.date && this._picker) {
         this._picker.setDate(this.date, true);
       }
+    });
   },
 
   didUpdateAttrs() {
@@ -44,13 +46,13 @@ export default Component.extend({
 
   _loadPikadayPicker(container) {
     loadScript("/javascripts/pikaday.js").then(() => {
-      next(() => {
-        const default_opts = {
+      const defaultOptions = {
         field: this.element.querySelector(".date-picker"),
-          container: container || this.element,
+        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"),
@@ -61,10 +63,9 @@ export default Component.extend({
         onSelect: date => this._handleSelection(date)
       };
 
-        this._picker = new Pikaday(Object.assign(default_opts, this._opts()));
+      this._picker = new Pikaday(Object.assign(defaultOptions, this._opts()));
       this._picker.setDate(this.date, true);
     });
-    });
   },
 
   _loadNativePicker(container) {

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%;