Make textarea grow on input (#11618)

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

@@ -1,4 +1,3 @@
-import "@material/mwc-textarea/mwc-textarea";
 import { mdiEye, mdiEyeOff } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -6,6 +5,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { StringSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
 import "../ha-icon-button";
+import "../ha-textarea";
 import "../ha-textfield";
 
 @customElement("ha-selector-text")
@@ -26,7 +26,7 @@ export class HaTextSelector extends LitElement {
 
   protected render() {
     if (this.selector.text?.multiline) {
-      return html`<mwc-textarea
+      return html`<ha-textarea
         .label=${this.label}
         .placeholder=${this.placeholder}
         .value=${this.value || ""}
@@ -36,7 +36,8 @@ export class HaTextSelector extends LitElement {
         autocomplete="off"
         spellcheck="false"
         required
-      ></mwc-textarea>`;
+        autogrow
+      ></ha-textarea>`;
     }
     return html`<ha-textfield
         .value=${this.value || ""}
@@ -79,8 +80,8 @@ export class HaTextSelector extends LitElement {
         display: block;
         position: relative;
       }
-      ha-textfield,
-      mwc-textarea {
+      ha-textarea,
+      ha-textfield {
         width: 100%;
       }
       ha-icon-button {

src/components/ha-textarea.ts

@@ -0,0 +1,60 @@
+import { TextAreaBase } from "@material/mwc-textarea/mwc-textarea-base";
+import { styles as textfieldStyles } from "@material/mwc-textfield/mwc-textfield.css";
+import { styles as textareaStyles } from "@material/mwc-textarea/mwc-textarea.css";
+import { css, PropertyValues } from "lit";
+import { customElement, property } from "lit/decorators";
+
+@customElement("ha-textarea")
+export class HaTextArea extends TextAreaBase {
+  @property({ type: Boolean, reflect: true }) autogrow = false;
+
+  updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (this.autogrow && changedProperties.has("value")) {
+      this.mdcRoot.dataset.value = this.value + '=\u200B"'; // add a zero-width space to correctly wrap
+    }
+  }
+
+  static override styles = [
+    textfieldStyles,
+    textareaStyles,
+    css`
+      :host([autogrow]) {
+        max-height: 200px;
+      }
+      :host([autogrow]) .mdc-text-field {
+        position: relative;
+        min-height: 74px;
+        min-width: 178px;
+      }
+      :host([autogrow]) .mdc-text-field:after {
+        content: attr(data-value);
+        margin-top: 23px;
+        margin-bottom: 9px;
+        line-height: 1.5rem;
+        min-height: 42px;
+        padding: 0px 32px 0 16px;
+        letter-spacing: var(
+          --mdc-typography-subtitle1-letter-spacing,
+          0.009375em
+        );
+        visibility: hidden;
+        white-space: pre-wrap;
+      }
+      :host([autogrow]) .mdc-text-field__input {
+        position: absolute;
+        height: calc(100% - 32px);
+      }
+      :host([autogrow]) .mdc-text-field.mdc-text-field--no-label:after {
+        margin-top: 16px;
+        margin-bottom: 16px;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-textarea": HaTextArea;
+  }
+}