Fix unresponsive date picker (#14600)

package.json

@@ -100,7 +100,7 @@
     "@vue/web-component-wrapper": "^1.2.0",
     "@webcomponents/scoped-custom-element-registry": "^0.0.5",
     "@webcomponents/webcomponentsjs": "^2.2.10",
-    "app-datepicker": "^5.0.1",
+    "app-datepicker": "^5.1.0",
     "chart.js": "^3.3.2",
     "comlink": "^4.3.1",
     "core-js": "^3.15.2",

src/components/ha-dialog-date-picker.ts

@@ -3,12 +3,16 @@ import "app-datepicker";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
+import { nextRender } from "../common/util/render-status";
 import { haStyleDialog } from "../resources/styles";
+import { HomeAssistant } from "../types";
 import { datePickerDialogParams } from "./ha-date-input";
 import "./ha-dialog";
 
 @customElement("ha-dialog-date-picker")
 export class HaDialogDatePicker extends LitElement {
+  @property() public hass!: HomeAssistant;
+
   @property() public value?: string;
 
   @property({ type: Boolean }) public disabled = false;
@@ -19,7 +23,10 @@ export class HaDialogDatePicker extends LitElement {
 
   @state() private _value?: string;
 
-  public showDialog(params: datePickerDialogParams): void {
+  public async showDialog(params: datePickerDialogParams): Promise<void> {
+    // app-datpicker has a bug, that it removes its handlers when disconnected, but doesnt add them back when reconnected.
+    // So we need to wait for the next render to make sure the element is removed and re-created so the handlers are added.
+    await nextRender();
     this._params = params;
     this._value = params.value;
   }
@@ -42,13 +49,15 @@ export class HaDialogDatePicker extends LitElement {
         @datepicker-value-updated=${this._valueChanged}
         .firstDayOfWeek=${this._params.firstWeekday}
       ></app-datepicker>
-      <mwc-button slot="secondaryAction" @click=${this._setToday}
-        >today</mwc-button
-      >
-      <mwc-button slot="primaryAction" dialogaction="cancel" class="cancel-btn">
-        cancel
+      <mwc-button slot="secondaryAction" @click=${this._setToday}>
+        ${this.hass.localize("ui.dialogs.date-picker.today")}
+      </mwc-button>
+      <mwc-button slot="primaryAction" dialogaction="cancel" class="cancel-btn">
+        ${this.hass.localize("ui.common.cancel")}
+      </mwc-button>
+      <mwc-button slot="primaryAction" @click=${this._setValue}>
+        ${this.hass.localize("ui.common.ok")}
       </mwc-button>
-      <mwc-button slot="primaryAction" @click=${this._setValue}>ok</mwc-button>
     </ha-dialog>`;
   }
 

src/translations/en.json

@@ -324,6 +324,7 @@
       "edit": "Edit",
       "submit": "Submit",
       "rename": "Rename",
+      "ok": "OK",
       "yes": "Yes",
       "no": "No",
       "not_now": "Not now",
@@ -816,6 +817,9 @@
       "image_cropper": {
         "crop": "Crop"
       },
+      "date-picker": {
+        "today": "Today"
+      },
       "more_info_control": {
         "dismiss": "Dismiss dialog",
         "settings": "Settings",

yarn.lock

@@ -4177,18 +4177,18 @@ __metadata:
   linkType: hard
 
 "@types/lodash-es@npm:^4.17.4":
-  version: 4.17.5
-  resolution: "@types/lodash-es@npm:4.17.5"
+  version: 4.17.6
+  resolution: "@types/lodash-es@npm:4.17.6"
   dependencies:
     "@types/lodash": "*"
-  checksum: 8910f646310aa008bb45071619fe85abf917bbc2c7cc0af883a971de261723247695a58dd966bfa9defd946cef79811d8b075eb6f0af12343080ab0ae6614e12
+  checksum: 9bd239dd525086e278821949ce12fbdd4f100a060fed9323fc7ad5661113e1641f28a7ebab617230ed3474680d8f4de705c1928b48252bb684be6ec9eed715db
   languageName: node
   linkType: hard
 
 "@types/lodash@npm:*":
-  version: 4.14.178
-  resolution: "@types/lodash@npm:4.14.178"
-  checksum: a69a04a60bfc5257c3130a554b4efa0c383f0141b7b3db8ab7cf07ad2a46ea085fce66d0242da41da7e5647b133d5dfb2c15add9cbed8d7fef955e4a1e5b3128
+  version: 4.14.191
+  resolution: "@types/lodash@npm:4.14.191"
+  checksum: ba0d5434e10690869f32d5ea49095250157cae502f10d57de0a723fd72229ce6c6a4979576f0f13e0aa9fbe3ce2457bfb9fa7d4ec3d6daba56730a51906d1491
   languageName: node
   linkType: hard
 
@@ -5401,15 +5401,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"app-datepicker@npm:^5.0.1":
-  version: 5.0.1
-  resolution: "app-datepicker@npm:5.0.1"
+"app-datepicker@npm:^5.1.0":
+  version: 5.1.1
+  resolution: "app-datepicker@npm:5.1.1"
   dependencies:
     "@material/mwc-button": ^0.25.3
-    lit: ^2.0.2
+    lit: ^2.2.1
     nodemod: 2.8.4
-    tslib: ^2.3.0
-  checksum: 619b6e725aca8a89a4ed28bd2390ad8e1c5a8da075928947d270e3dd5df98f6082fdf7ca1190d382d3ad73bacabcd048af21c8579e8f40c0032eba74a2e8c667
+    tslib: ^2.3.1
+  checksum: 1d733bf76bb18f2b60618b58809b3ba52b0e68e90cd5a921819c462df3dab960beb3daad3323e0e587c3a6a614f7d837e15b5bfa866cda5fcd938326447749c1
   languageName: node
   linkType: hard
 
@@ -9387,7 +9387,7 @@ fsevents@^1.2.7:
     "@web/dev-server-rollup": ^0.2.11
     "@webcomponents/scoped-custom-element-registry": ^0.0.5
     "@webcomponents/webcomponentsjs": ^2.2.10
-    app-datepicker: ^5.0.1
+    app-datepicker: ^5.1.0
     babel-loader: ^9.1.0
     chai: ^4.3.4
     chart.js: ^3.3.2
@@ -15312,10 +15312,10 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.1, tslib@npm:^2.0.2, tslib@npm:^2.1.0, tslib@npm:^2.2.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0":
-  version: 2.4.0
-  resolution: "tslib@npm:2.4.0"
-  checksum: 8c4aa6a3c5a754bf76aefc38026134180c053b7bd2f81338cb5e5ebf96fefa0f417bff221592bf801077f5bf990562f6264fecbc42cd3309b33872cb6fc3b113
+"tslib@npm:^2.0.1, tslib@npm:^2.0.2, tslib@npm:^2.1.0, tslib@npm:^2.2.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0":
+  version: 2.4.1
+  resolution: "tslib@npm:2.4.1"
+  checksum: 19480d6e0313292bd6505d4efe096a6b31c70e21cf08b5febf4da62e95c265c8f571f7b36fcc3d1a17e068032f59c269fab3459d6cd3ed6949eafecf64315fca
   languageName: node
   linkType: hard