Fix various issues in time/duration input (#13462)

src/components/ha-base-time-input.ts

@@ -1,10 +1,11 @@
 import "@material/mwc-list/mwc-list-item";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import "./ha-select";
-import "./ha-textfield";
+import { HaTextField } from "./ha-textfield";
 import "./ha-input-helper-text";
 
 export interface TimeChangedEvent {
@@ -36,7 +37,7 @@ export class HaBaseTimeInput extends LitElement {
   /**
    * determines if inputs are required
    */
-  @property({ type: Boolean }) public required?: boolean;
+  @property({ type: Boolean }) public required = false;
 
   /**
    * 12 or 24 hr format
@@ -123,11 +124,6 @@ export class HaBaseTimeInput extends LitElement {
    */
   @property() amPm: "AM" | "PM" = "AM";
 
-  /**
-   * Formatted time string
-   */
-  @property() value?: string;
-
   protected render(): TemplateResult {
     return html`
       ${this.label
@@ -140,11 +136,11 @@ export class HaBaseTimeInput extends LitElement {
                 id="day"
                 type="number"
                 inputmode="numeric"
-                .value=${this.days}
+                .value=${this.days.toFixed()}
                 .label=${this.dayLabel}
                 name="days"
                 @input=${this._valueChanged}
-                @focus=${this._onFocus}
+                @focusin=${this._onFocus}
                 no-spinner
                 .required=${this.required}
                 .autoValidate=${this.autoValidate}
@@ -161,16 +157,16 @@ export class HaBaseTimeInput extends LitElement {
           id="hour"
           type="number"
           inputmode="numeric"
-          .value=${this.hours}
+          .value=${this.hours.toFixed()}
           .label=${this.hourLabel}
           name="hours"
           @input=${this._valueChanged}
-          @focus=${this._onFocus}
+          @focusin=${this._onFocus}
           no-spinner
           .required=${this.required}
           .autoValidate=${this.autoValidate}
           maxlength="2"
-          .max=${this._hourMax}
+          max=${ifDefined(this._hourMax)}
           min="0"
           .disabled=${this.disabled}
           suffix=":"
@@ -184,7 +180,7 @@ export class HaBaseTimeInput extends LitElement {
           .value=${this._formatValue(this.minutes)}
           .label=${this.minLabel}
           @input=${this._valueChanged}
-          @focus=${this._onFocus}
+          @focusin=${this._onFocus}
           name="minutes"
           no-spinner
           .required=${this.required}
@@ -205,7 +201,7 @@ export class HaBaseTimeInput extends LitElement {
               .value=${this._formatValue(this.seconds)}
               .label=${this.secLabel}
               @input=${this._valueChanged}
-              @focus=${this._onFocus}
+              @focusin=${this._onFocus}
               name="seconds"
               no-spinner
               .required=${this.required}
@@ -226,7 +222,7 @@ export class HaBaseTimeInput extends LitElement {
               .value=${this._formatValue(this.milliseconds, 3)}
               .label=${this.millisecLabel}
               @input=${this._valueChanged}
-              @focus=${this._onFocus}
+              @focusin=${this._onFocus}
               name="milliseconds"
               no-spinner
               .required=${this.required}
@@ -260,9 +256,10 @@ export class HaBaseTimeInput extends LitElement {
     `;
   }
 
-  private _valueChanged(ev) {
+  private _valueChanged(ev: InputEvent) {
-    this[ev.target.name] =
+    const textField = ev.currentTarget as HaTextField;
-      ev.target.name === "amPm" ? ev.target.value : Number(ev.target.value);
+    this[textField.name] =
+      textField.name === "amPm" ? textField.value : Number(textField.value);
     const value: TimeChangedEvent = {
       hours: this.hours,
       minutes: this.minutes,
@@ -277,8 +274,8 @@ export class HaBaseTimeInput extends LitElement {
     });
   }
 
-  private _onFocus(ev) {
+  private _onFocus(ev: FocusEvent) {
-    ev.target.select();
+    (ev.currentTarget as HaTextField).select();
   }
 
   /**
@@ -293,7 +290,7 @@ export class HaBaseTimeInput extends LitElement {
    */
   private get _hourMax() {
     if (this.noHoursLimit) {
-      return null;
+      return undefined;
     }
     if (this.format === 12) {
       return 12;

src/components/ha-duration-input.ts

@@ -14,17 +14,17 @@ export interface HaDurationData {
 
 @customElement("ha-duration-input")
 class HaDurationInput extends LitElement {
-  @property({ attribute: false }) public data!: HaDurationData;
+  @property({ attribute: false }) public data?: HaDurationData;
 
   @property() public label?: string;
 
   @property() public helper?: string;
 
-  @property({ type: Boolean }) public required?: boolean;
+  @property({ type: Boolean }) public required = false;
 
-  @property({ type: Boolean }) public enableMillisecond?: boolean;
+  @property({ type: Boolean }) public enableMillisecond = false;
 
-  @property({ type: Boolean }) public enableDay?: boolean;
+  @property({ type: Boolean }) public enableDay = false;
 
   @property({ type: Boolean }) public disabled = false;
 

src/components/ha-form/ha-form-positive_time_period_dict.ts

@@ -5,9 +5,9 @@ import { HaFormElement, HaFormTimeData, HaFormTimeSchema } from "./types";
 
 @customElement("ha-form-positive_time_period_dict")
 export class HaFormTimePeriod extends LitElement implements HaFormElement {
-  @property() public schema!: HaFormTimeSchema;
+  @property({ attribute: false }) public schema!: HaFormTimeSchema;
 
-  @property() public data!: HaFormTimeData;
+  @property({ attribute: false }) public data!: HaFormTimeData;
 
   @property() public label!: string;
 
@@ -25,7 +25,7 @@ export class HaFormTimePeriod extends LitElement implements HaFormElement {
     return html`
       <ha-duration-input
         .label=${this.label}
-        .required=${this.schema.required}
+        ?required=${this.schema.required}
         .data=${this.data}
         .disabled=${this.disabled}
       ></ha-duration-input>

src/components/ha-selector/ha-selector-datetime.ts

@@ -11,9 +11,9 @@ import type { HaTimeInput } from "../ha-time-input";
 
 @customElement("ha-selector-datetime")
 export class HaDateTimeSelector extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public selector!: DateTimeSelector;
+  @property({ attribute: false }) public selector!: DateTimeSelector;
 
   @property() public value?: string;
 

src/components/ha-selector/ha-selector-duration.ts

@@ -2,15 +2,15 @@ import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { DurationSelector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
-import "../ha-duration-input";
+import { HaDurationData } from "../ha-duration-input";
 
 @customElement("ha-selector-duration")
 export class HaTimeDuration extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public selector!: DurationSelector;
+  @property({ attribute: false }) public selector!: DurationSelector;
 
-  @property() public value?: string;
+  @property({ attribute: false }) public value?: HaDurationData;
 
   @property() public label?: string;
 
@@ -28,7 +28,7 @@ export class HaTimeDuration extends LitElement {
         .data=${this.value}
         .disabled=${this.disabled}
         .required=${this.required}
-        .enableDay=${this.selector.duration.enable_day}
+        ?enableDay=${this.selector.duration.enable_day}
       ></ha-duration-input>
     `;
   }

src/components/ha-selector/ha-selector-time.ts

@@ -6,9 +6,9 @@ import "../ha-time-input";
 
 @customElement("ha-selector-time")
 export class HaTimeSelector extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public selector!: TimeSelector;
+  @property({ attribute: false }) public selector!: TimeSelector;
 
   @property() public value?: string;
 

src/components/ha-time-input.ts

@@ -43,7 +43,7 @@ export class HaTimeInput extends LitElement {
         .minutes=${Number(parts[1])}
         .seconds=${Number(parts[2])}
         .format=${useAMPM ? 12 : 24}
-        .amPm=${useAMPM && (numberHours >= 12 ? "PM" : "AM")}
+        .amPm=${useAMPM && numberHours >= 12 ? "PM" : "AM"}
         .disabled=${this.disabled}
         @value-changed=${this._timeChanged}
         .enableSecond=${this.enableSecond}

src/dialogs/more-info/controls/more-info-input_datetime.ts

@@ -60,7 +60,7 @@ class MoreInfoInputDatetime extends LitElement {
     ev.stopPropagation();
   }
 
-  private _timeChanged(ev): void {
+  private _timeChanged(ev: CustomEvent<{ value: string }>): void {
     setInputDateTimeValue(
       this.hass!,
       this.stateObj!.entity_id,
@@ -69,10 +69,9 @@ class MoreInfoInputDatetime extends LitElement {
         ? this.stateObj!.state.split(" ")[0]
         : undefined
     );
-    ev.target.blur();
   }
 
-  private _dateChanged(ev): void {
+  private _dateChanged(ev: CustomEvent<{ value: string }>): void {
     setInputDateTimeValue(
       this.hass!,
       this.stateObj!.entity_id,
@@ -81,8 +80,6 @@ class MoreInfoInputDatetime extends LitElement {
         : undefined,
       ev.detail.value
     );
-
-    ev.target.blur();
   }
 
   static get styles(): CSSResultGroup {

src/panels/config/automation/action/types/ha-automation-action-delay.ts

@@ -1,5 +1,5 @@
 import { html, LitElement, PropertyValues } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { hasTemplate } from "../../../../../common/string/has-template";
 import type { HaDurationData } from "../../../../../components/ha-duration-input";
@@ -13,9 +13,9 @@ import { createDurationData } from "../../../../../common/datetime/create_durati
 export class HaDelayAction extends LitElement implements ActionElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public action!: DelayAction;
+  @property({ attribute: false }) public action!: DelayAction;
 
-  @property() public _timeData?: HaDurationData;
+  @state() private _timeData?: HaDurationData;
 
   public static get defaultConfig() {
     return { delay: "" };

src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts

@@ -10,6 +10,7 @@ import { ActionElement, handleChangeEvent } from "../ha-automation-action-row";
 import "../../../../../components/ha-duration-input";
 import { createDurationData } from "../../../../../common/datetime/create_duration_data";
 import { TimeChangedEvent } from "../../../../../components/ha-base-time-input";
+import { ensureArray } from "../../../../../common/ensure-array";
 
 @customElement("ha-automation-action-wait_for_trigger")
 export class HaWaitForTriggerAction
@@ -18,14 +19,13 @@ export class HaWaitForTriggerAction
 {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public action!: WaitForTriggerAction;
+  @property({ attribute: false }) public action!: WaitForTriggerAction;
 
   public static get defaultConfig() {
     return { wait_for_trigger: [] };
   }
 
   protected render() {
-    const { wait_for_trigger, continue_on_timeout } = this.action;
     const timeData = createDurationData(this.action.timeout);
 
     return html`
@@ -43,12 +43,12 @@ export class HaWaitForTriggerAction
         )}
       >
         <ha-switch
-          .checked=${continue_on_timeout ?? true}
+          .checked=${this.action.continue_on_timeout ?? true}
           @change=${this._continueChanged}
         ></ha-switch>
       </ha-formfield>
       <ha-automation-trigger
-        .triggers=${wait_for_trigger}
+        .triggers=${ensureArray(this.action.wait_for_trigger)}
         .hass=${this.hass}
         .name=${"wait_for_trigger"}
         @value-changed=${this._valueChanged}

src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts

@@ -97,7 +97,7 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
     ev.stopPropagation();
   }
 
-  private _timeChanged(ev): void {
+  private _timeChanged(ev: CustomEvent<{ value: string }>): void {
     const stateObj = this.hass!.states[this._config!.entity];
     setInputDateTimeValue(
       this.hass!,
@@ -105,10 +105,9 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
       ev.detail.value,
       stateObj.attributes.has_date ? stateObj.state.split(" ")[0] : undefined
     );
-    ev.target.blur();
   }
 
-  private _dateChanged(ev): void {
+  private _dateChanged(ev: CustomEvent<{ value: string }>): void {
     const stateObj = this.hass!.states[this._config!.entity];
 
     setInputDateTimeValue(
@@ -117,8 +116,6 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
       stateObj.attributes.has_time ? stateObj.state.split(" ")[1] : undefined,
       ev.detail.value
     );
-
-    ev.target.blur();
   }
 
   static get styles(): CSSResultGroup {