FIX: changing date should recompute input (#16937)

This also fixes the time part being lost when changing the date.

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

@@ -21,6 +21,7 @@ export default Component.extend({
   labelClasses: null,
   timeInputDisabled: empty("_date"),
   userTimezone: null,
+  onChangeInput: null,
 
   _date: null,
   _time: null,
@@ -28,6 +29,14 @@ export default Component.extend({
   init() {
     this._super(...arguments);
     this.userTimezone = this.currentUser.timezone;
+  },
+
+  didReceiveAttrs() {
+    this._super(...arguments);
+
+    if (this.label) {
+      this.set("displayLabel", I18n.t(this.label));
+    }
 
     if (this.input) {
       const dateTime = moment(this.input);
@@ -44,14 +53,6 @@ export default Component.extend({
     }
   },
 
-  didReceiveAttrs() {
-    this._super(...arguments);
-
-    if (this.label) {
-      this.set("displayLabel", I18n.t(this.label));
-    }
-  },
-
   @discourseComputed("customShortcuts")
   shortcuts(customShortcuts) {
     let shortcuts;
@@ -89,10 +90,10 @@ export default Component.extend({
   @action
   onChangeDate(date) {
     if (!date) {
-      this.set("time", null);
+      this.set("_time", null);
     }
 
-    this._dateTimeChanged(date, this.time);
+    this._dateTimeChanged(date, this._time);
   },
 
   @action
@@ -107,10 +108,9 @@ export default Component.extend({
     const dateTime = moment(`${date}${time}`);
 
     if (dateTime.isValid()) {
-      this.attrs.onChangeInput &&
-        this.attrs.onChangeInput(dateTime.format(FORMAT));
+      this.onChangeInput?.(dateTime.format(FORMAT));
     } else {
-      this.attrs.onChangeInput && this.attrs.onChangeInput(null);
+      this.onChangeInput?.(null);
     }
   },
 

app/assets/javascripts/discourse/tests/integration/components/future-date-input-test.js

@@ -10,6 +10,7 @@ import {
 } from "discourse/tests/helpers/qunit-helpers";
 import hbs from "htmlbars-inline-precompile";
 import I18n from "I18n";
+import { fillIn } from "@ember/test-helpers";
 
 discourseModule("Unit | Lib | select-kit/future-date-input", function (hooks) {
   setupRenderingTest(hooks);
@@ -126,6 +127,26 @@ discourseModule("Unit | Lib | select-kit/future-date-input", function (hooks) {
     },
   });
 
+  componentTest("changing date/time updates the input correctly", {
+    template: hbs`{{future-date-input input=input onChangeInput=(action (mut input))}}`,
+
+    beforeEach() {
+      this.set("input", moment("2032-01-01 11:10"));
+    },
+
+    async test(assert) {
+      await fillIn(".time-input", "11:15");
+
+      assert.ok(this.input.includes("2032-01-01"));
+      assert.ok(this.input.includes("11:15"));
+
+      await fillIn(".date-picker", "2033-01-01 ");
+
+      assert.ok(this.input.includes("2033-01-01"));
+      assert.ok(this.input.includes("11:15"));
+    },
+  });
+
   function getOptions() {
     return Array.from(
       queryAll(`.select-kit-collection .select-kit-row`).map(