Allow disabling an ha-form (#10218)

gallery/src/components/demo-black-white-row.ts

@@ -1,6 +1,8 @@
+import { Button } from "@material/mwc-button";
 import { html, LitElement, css, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
+import { fireEvent } from "../../../src/common/dom/fire_event";
 
 @customElement("demo-black-white-row")
 class DemoBlackWhiteRow extends LitElement {
@@ -8,6 +10,8 @@ class DemoBlackWhiteRow extends LitElement {
 
   @property() value!: any;
 
+  @property() disabled = false;
+
   protected render(): TemplateResult {
     return html`
       <div class="row">
@@ -17,7 +21,12 @@ class DemoBlackWhiteRow extends LitElement {
               <slot name="light"></slot>
             </div>
             <div class="card-actions">
-              <mwc-button>Submit</mwc-button>
+              <mwc-button
+                .disabled=${this.disabled}
+                @click=${this.handleSubmit}
+              >
+                Submit
+              </mwc-button>
             </div>
           </ha-card>
         </div>
@@ -27,7 +36,12 @@ class DemoBlackWhiteRow extends LitElement {
               <slot name="dark"></slot>
             </div>
             <div class="card-actions">
-              <mwc-button>Submit</mwc-button>
+              <mwc-button
+                .disabled=${this.disabled}
+                @click=${this.handleSubmit}
+              >
+                Submit
+              </mwc-button>
             </div>
           </ha-card>
           <pre>${JSON.stringify(this.value, undefined, 2)}</pre>
@@ -51,6 +65,13 @@ class DemoBlackWhiteRow extends LitElement {
     );
   }
 
+  handleSubmit(ev) {
+    const content = (ev.target as Button).closest(".content")!;
+    fireEvent(this, "submitted" as any, {
+      slot: content.classList.contains("light") ? "light" : "dark",
+    });
+  }
+
   static styles = css`
     .row {
       display: flex;

gallery/src/demos/demo-ha-form.ts

@@ -230,12 +230,26 @@ class DemoHaForm extends LitElement {
     ({ schema, data }) => data || computeInitialHaFormData(schema)
   );
 
+  private disabled = SCHEMAS.map(() => false);
+
   protected render(): TemplateResult {
     return html`
       ${SCHEMAS.map((info, idx) => {
         const translations = info.translations || {};
         return html`
-          <demo-black-white-row .title=${info.title} .value=${this.data[idx]}>
+          <demo-black-white-row
+            .title=${info.title}
+            .value=${this.data[idx]}
+            .disabled=${this.disabled[idx]}
+            @submitted=${() => {
+              this.disabled[idx] = true;
+              this.requestUpdate();
+              setTimeout(() => {
+                this.disabled[idx] = false;
+                this.requestUpdate();
+              }, 2000);
+            }}
+          >
             ${["light", "dark"].map(
               (slot) => html`
                 <ha-form
@@ -243,6 +257,7 @@ class DemoHaForm extends LitElement {
                   .data=${this.data[idx]}
                   .schema=${info.schema}
                   .error=${info.error}
+                  .disabled=${this.disabled[idx]}
                   .computeError=${(error) => translations[error] || error}
                   .computeLabel=${(schema) =>
                     translations[schema.name] || schema.name}

src/auth/ha-auth-flow.ts

@@ -39,6 +39,8 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
 
   @state() private _errorMessage?: string;
 
+  @state() private _submitting = false;
+
   willUpdate(changedProps: PropertyValues) {
     super.willUpdate(changedProps);
 
@@ -135,13 +137,15 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
         return html`
           ${this._renderStep(this._step)}
           <div class="action">
-            <mwc-button raised @click=${this._handleSubmit}
+            <mwc-button
-              >${this._step.type === "form"
+              raised
-                ? this.localize("ui.panel.page-authorize.form.next")
+              @click=${this._handleSubmit}
-                : this.localize(
+              .disabled=${this._submitting}
-                    "ui.panel.page-authorize.form.start_over"
-                  )}</mwc-button
             >
+              ${this._step.type === "form"
+                ? this.localize("ui.panel.page-authorize.form.next")
+                : this.localize("ui.panel.page-authorize.form.start_over")}
+            </mwc-button>
           </div>
         `;
       case "error":
@@ -192,6 +196,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
             .data=${this._stepData}
             .schema=${step.data_schema}
             .error=${step.errors}
+            .disabled=${this._submitting}
             .computeLabel=${this._computeLabelCallback(step)}
             .computeError=${this._computeErrorCallback(step)}
             @value-changed=${this._stepDataChanged}
@@ -317,9 +322,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
       this._providerChanged(this.authProvider);
       return;
     }
-    this._state = "loading";
+    this._submitting = true;
-    // To avoid a jumping UI.
-    this.style.setProperty("min-height", `${this.offsetHeight}px`);
 
     const postData = { ...this._stepData, client_id: this.clientId };
 
@@ -344,16 +347,12 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
       this._state = "error";
       this._errorMessage = this._unknownError();
     } finally {
-      this.style.setProperty("min-height", "");
+      this._submitting = false;
     }
   }
 
   static get styles(): CSSResultGroup {
     return css`
-      :host {
-        /* So we can set min-height to avoid jumping during loading */
-        display: block;
-      }
       .action {
         margin: 24px 0 8px;
         text-align: center;

src/components/ha-duration-input.ts

@@ -20,6 +20,8 @@ class HaDurationInput extends LitElement {
 
   @property({ type: Boolean }) public enableMillisecond?: boolean;
 
+  @property({ type: Boolean }) public disabled = false;
+
   @query("paper-time-input", true) private _input?: HTMLElement;
 
   public focus() {
@@ -34,6 +36,7 @@ class HaDurationInput extends LitElement {
         .label=${this.label}
         .required=${this.required}
         .autoValidate=${this.required}
+        .disabled=${this.disabled}
         error-message="Required"
         enable-second
         .enableMillisecond=${this.enableMillisecond}

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

@@ -18,6 +18,8 @@ export class HaFormBoolean extends LitElement implements HaFormElement {
 
   @property() public label!: string;
 
+  @property({ type: Boolean }) public disabled = false;
+
   @query("paper-checkbox", true) private _input?: HTMLElement;
 
   public focus() {
@@ -31,6 +33,7 @@ export class HaFormBoolean extends LitElement implements HaFormElement {
       <mwc-formfield .label=${this.label}>
         <ha-checkbox
           .checked=${this.data}
+          .disabled=${this.disabled}
           @change=${this._valueChanged}
         ></ha-checkbox>
       </mwc-formfield>

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

@@ -13,6 +13,8 @@ export class HaFormFloat extends LitElement implements HaFormElement {
 
   @property() public label!: string;
 
+  @property({ type: Boolean }) public disabled = false;
+
   @query("mwc-textfield") private _input?: HTMLElement;
 
   public focus() {
@@ -27,6 +29,7 @@ export class HaFormFloat extends LitElement implements HaFormElement {
         inputMode="decimal"
         .label=${this.label}
         .value=${this.data !== undefined ? this.data : ""}
+        .disabled=${this.disabled}
         .required=${this.schema.required}
         .autoValidate=${this.schema.required}
         .suffix=${this.schema.description?.suffix}

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

@@ -23,6 +23,8 @@ export class HaFormInteger extends LitElement implements HaFormElement {
 
   @property() public label?: string;
 
+  @property({ type: Boolean }) public disabled = false;
+
   @query("paper-input ha-slider") private _input?: HTMLElement;
 
   private _lastValue?: HaFormIntegerData;
@@ -44,6 +46,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
                   <ha-checkbox
                     @change=${this._handleCheckboxChange}
                     .checked=${this.data !== undefined}
+                    .disabled=${this.disabled}
                   ></ha-checkbox>
                 `
               : ""}
@@ -52,7 +55,8 @@ export class HaFormInteger extends LitElement implements HaFormElement {
               .value=${this._value}
               .min=${this.schema.valueMin}
               .max=${this.schema.valueMax}
-              .disabled=${this.data === undefined && this.schema.optional}
+              .disabled=${this.disabled ||
+              (this.data === undefined && this.schema.optional)}
               @change=${this._valueChanged}
             ></mwc-slider>
           </div>
@@ -66,6 +70,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
         inputMode="numeric"
         .label=${this.label}
         .value=${this.data !== undefined ? this.data : ""}
+        .disabled=${this.disabled}
         .required=${this.schema.required}
         .autoValidate=${this.schema.required}
         .suffix=${this.schema.description?.suffix}

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

@@ -39,6 +39,8 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
 
   @property() public label!: string;
 
+  @property({ type: Boolean }) public disabled = false;
+
   @state() private _opened = false;
 
   @query("paper-menu-button", true) private _input?: HTMLElement;
@@ -60,6 +62,7 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
           <ha-checkbox
             .checked=${data.includes(value)}
             .value=${value}
+            .disabled=${this.disabled}
             @change=${this._valueChanged}
           ></ha-checkbox>
         </mwc-formfield>
@@ -73,6 +76,7 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
 
     return html`
       <ha-button-menu
+        .disabled=${this.disabled}
         fixed
         corner="BOTTOM_START"
         @opened=${this._handleOpen}
@@ -84,6 +88,7 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
           .value=${data
             .map((value) => this.schema.options![value] || value)
             .join(", ")}
+          .disabled=${this.disabled}
           tabindex="-1"
         ></mwc-textfield>
         <ha-svg-icon

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

@@ -11,6 +11,8 @@ export class HaFormTimePeriod extends LitElement implements HaFormElement {
 
   @property() public label!: string;
 
+  @property({ type: Boolean }) public disabled = false;
+
   @query("ha-time-input", true) private _input?: HTMLElement;
 
   public focus() {
@@ -25,6 +27,7 @@ export class HaFormTimePeriod extends LitElement implements HaFormElement {
         .label=${this.label}
         .required=${this.schema.required}
         .data=${this.data}
+        .disabled=${this.disabled}
       ></ha-duration-input>
     `;
   }

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

@@ -19,6 +19,8 @@ export class HaFormSelect extends LitElement implements HaFormElement {
 
   @property() public label!: string;
 
+  @property({ type: Boolean }) public disabled = false;
+
   @query("mwc-select", true) private _input?: HTMLElement;
 
   public focus() {
@@ -38,6 +40,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
                 <ha-radio
                   .checked=${value === this.data}
                   .value=${value}
+                  .disabled=${this.disabled}
                   @change=${this._valueChanged}
                 ></ha-radio>
               </mwc-formfield>
@@ -52,6 +55,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
         fixedMenuPosition
         .label=${this.label}
         .value=${this.data}
+        .disabled=${this.disabled}
         @closed=${stopPropagation}
         @selected=${this._valueChanged}
       >

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

@@ -28,6 +28,8 @@ export class HaFormString extends LitElement implements HaFormElement {
 
   @property() public label!: string;
 
+  @property({ type: Boolean }) public disabled = false;
+
   @state() private _unmaskedPassword = false;
 
   @query("mwc-textfield") private _input?: HTMLElement;
@@ -51,6 +53,7 @@ export class HaFormString extends LitElement implements HaFormElement {
           : "password"}
         .label=${this.label}
         .value=${this.data || ""}
+        .disabled=${this.disabled}
         .required=${this.schema.required}
         .autoValidate=${this.schema.required}
         .suffix=${isPassword

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

@@ -23,6 +23,8 @@ export class HaForm extends LitElement implements HaFormElement {
 
   @property() public error?: Record<string, string>;
 
+  @property({ type: Boolean }) public disabled = false;
+
   @property() public computeError?: (schema: HaFormSchema, error) => string;
 
   @property() public computeLabel?: (schema: HaFormSchema) => string;
@@ -64,6 +66,7 @@ export class HaForm extends LitElement implements HaFormElement {
               schema: item,
               data: getValue(this.data, item),
               label: this._computeLabel(item),
+              disabled: this.disabled,
             })}
           `;
         })}