Automatically resize a text area using web components

In this blog post, we’ll explore how to create a custom HTML element that automatically resizes a textarea as the user types. We’ll be using the autosize library and leveraging the power of Web Components to achieve this.

What is Autosize?

Autosize is a lightweight JavaScript library that automatically adjusts the height of a textarea based on its content. This ensures that all text is visible without the need for scrollbars, enhancing the user experience.

The Plan

We’ll create a custom HTML element called <auto-expand> which extends the native <textarea> element. This custom element will use the autosize library to dynamically resize itself as the user types.

Step-by-Step Implementation

Step 1: Import the Autosize Library

First, we need to import the autosize library. For simplicity, we’ll use a CDN to include it in our project.

import * as autosize from "https://esm.run/autosize";

Step 2: Create the Custom Element

Next, we define a custom element called AutoExpand that extends the HTMLTextAreaElement. In the constructor, we call the autosize function, passing the current element (this) as an argument.

class AutoExpand extends HTMLTextAreaElement {
  constructor() {
    super();
    autosize(this);
  }
}

customElements.define("auto-expand", AutoExpand, { extends: "textarea" });

Step 3: Use the Custom Element in HTML

Finally, we can use our custom element in HTML. By specifying is="auto-expand", we tell the browser to use our AutoExpand class for this textarea.

<textarea is="auto-expand"></textarea>

Autosize without the Autosize Library

There is an alternative approach to autosizing textareas without using the autosize library. This method involves listening for input events on the textarea and adjusting its height based on the content.

function autosize(textarea) {
  textarea.style.boxSizing = "border-box";
  textarea.style.resize = "none";
  const offset = textarea.offsetHeight - textarea.clientHeight;
  textarea.style.height = "auto";
  textarea.style.height = textarea.scrollHeight + offset + "px";
}

You can call this function whenever the input event is triggered on the textarea element.

textarea.addEventListener("input", () => autosize(textarea));

New CSS-only way with field-sizing

There is new fancy way to autosize textarea or input fields using only CSS. You can use field-sizing: content to make the input field grow with its content. Current support is limited to Chromium-only, but it’s a nice alternative and worth considering as future-proof solution.

textarea {
  field-sizing: content;
}

It’s a single CSS property that really does all of that work for you, it even sizes to the placeholder when you clear it.

Conclusion

By following these steps, you can create a custom HTML element that automatically resizes a textarea as the user types. This technique leverages the simplicity and power of the autosize library and the flexibility of Web Components, resulting in a smooth and user-friendly experience.

Feel free to customize and extend this basic example to suit your specific needs. Happy coding!