A web component for progressively-enhanced auto-expanding textareas

Overview

Elastic Textarea

NPM version Build Status Renovate

A web component for progressively-enhanced auto-expanding textareas.

This web component progressively enhances the native textarea: as a user types in the textarea, its height increases so that its content is never clipped. When the user deletes content in the textarea it shrinks back down to a minimum number of rows.

A gif of an textarea expanding and shrinking as a user types and deletes content.

(Note: if a user manually resizes a textarea it will no longer be elastic.)

Installation

NPM

You can install via npm:

npm i @cloudfour/elastic-textarea

Then you'll need to import the component code:

import "@cloudfour/elastic-textarea";

CDN

Alternately, you can load the script via CDN:

<script
  type="module"
  src="https://unpkg.com/@cloudfour/elastic-textarea/index.min.js"
></script>

Usage

Once the JavaScript has been loaded, you can use elastic-textarea in your HTML.

elastic-textarea is meant to wrap one or more textarea elements. This ensures that before the JS loads and runs, the textarea is still usable.

<elastic-textarea>
  <label>
    Textarea 1
    <textarea name="textarea-1"></textarea>
  </label>
</elastic-textarea>

If multiple textarea elements are wrapped in an elastic-textarea they will all be initialized. This allows you to easily wrap an entire form or page and enhance all the textareas within:

<elastic-textarea>
  <label>
    Textarea 1
    <textarea name="textarea-1"></textarea>
  </label>
  <label>
    Textarea 2
    <textarea name="textarea-2"></textarea>
  </label>
</elastic-textarea>
Comments
  • Operator precedence issue

    Operator precedence issue

    This line:

    if (!target instanceof HTMLTextAreaElement) return;
    

    parses as this:

    if ((!target) instanceof HTMLTextAreaElement) return;
    

    but you probably intended this:

    if (!(target instanceof HTMLTextAreaElement)) return;
    
    opened by jed 1
  • Update dependency pleasantest to v3.0.1

    Update dependency pleasantest to v3.0.1

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | pleasantest | 3.0.0 -> 3.0.1 | age | adoption | passing | confidence |


    Release Notes

    cloudfour/pleasantest

    v3.0.1

    Compare Source

    Patch Changes
    • #​631 f124a5a Thanks @​calebeby! - [bugfix] Don't override <head> when using utils.injectHTML

      This was a bug introduced in 3.0.0. This change fixes that behavior to match what is documented. The documented behavior is that injectHTML replaces the content of the body only. The behavior introduced in 3.0.0 also resets the <head> to the default; that was unintended behavior that is now removed.


    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Enabled.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Update dependency browser-sync to v2.27.11

    Update dependency browser-sync to v2.27.11

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | browser-sync (source) | 2.27.10 -> 2.27.11 | age | adoption | passing | confidence |


    Release Notes

    BrowserSync/browser-sync

    v2.27.11

    Compare Source


    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Enabled.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Update dependency jest to v29.3.1

    Update dependency jest to v29.3.1

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | jest (source) | 29.3.0 -> 29.3.1 | age | adoption | passing | confidence |


    Release Notes

    facebook/jest

    v29.3.1

    Compare Source

    Fixes
    • [jest-config] Do not warn about preset in ProjectConfig #​13583
    Performance
    • [jest-transform] Defer creation of cache directory #​13420

    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Enabled.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Update dependency jest to v29.3.0

    Update dependency jest to v29.3.0

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | jest (source) | 29.2.2 -> 29.3.0 | age | adoption | passing | confidence |


    Release Notes

    facebook/jest

    v29.3.0

    Compare Source

    Features
    • [jest-runtime] Support WebAssembly (Wasm) imports in ESM modules (#​13505)
    Fixes
    • [jest-config] Add config validation for projects option (#​13565)
    • [jest-mock] Treat cjs modules as objects so they can be mocked (#​13513)
    • [jest-worker] Throw an error instead of hanging when jest workers terminate unexpectedly (#​13566)
    Chore & Maintenance
    • [@jest/transform] Update convert-source-map (#​13509)
    • [docs] Mention toStrictEqual in UsingMatchers docs. (#​13560)

    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Enabled.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Update dependency jest to v29.2.2

    Update dependency jest to v29.2.2

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | jest (source) | 29.2.1 -> 29.2.2 | age | adoption | passing | confidence |


    Release Notes

    facebook/jest

    v29.2.2

    Compare Source

    Fixes
    • [@jest/test-sequencer] Make sure sharding does not produce empty groups (#​13476)
    • [jest-circus] Test marked as todo are shown as todo when inside a focussed describe (#​13504)
    • [jest-mock] Ensure mock resolved and rejected values are promises from correct realm (#​13503)
    • [jest-snapshot] Don't highlight passing asymmetric property matchers in snapshot diff (#​13480)
    Chore & Maintenance
    • [docs] Update link to Jest 28 upgrade guide in error message (#​13483)
    • [jest-runner, jest-watcher] Update emittery (#​13490)

    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Enabled.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Update dependency jest to v29.2.1

    Update dependency jest to v29.2.1

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | jest (source) | 29.2.0 -> 29.2.1 | age | adoption | passing | confidence |


    Release Notes

    facebook/jest

    v29.2.1

    Compare Source

    Features
    • [@jest/globals, jest-mock] Add jest.Spied* utility types (#​13440)
    Fixes
    • [jest-environment-node] make globalThis.performance writable for Node 19 and fake timers (#​13467)
    • [jest-mock] Revert #​13398 to restore mocking of setters (#​13472)
    Performance

    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Enabled.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Update dependency jest to v29.2.0

    Update dependency jest to v29.2.0

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | jest (source) | 29.1.2 -> 29.2.0 | age | adoption | passing | confidence |


    Release Notes

    facebook/jest

    v29.2.0

    Compare Source

    Features
    • [@jest/cli, jest-config] A seed for the test run will be randomly generated, or set by a CLI option (#​13400)
    • [@jest/cli, jest-config] --show-seed will display the seed value in the report, and can be set via a CLI flag or through the config file (#​13400)
    • [jest-config] Add readInitialConfig utility function (#​13356)
    • [jest-core] Allow testResultsProcessor to be async (#​13343)
    • [@jest/environment, jest-environment-node, jest-environment-jsdom, jest-runtime] Add getSeed() to the jest object (#​13400)
    • [expect, @&#8203;jest/expect-utils] Allow isA utility to take a type argument (#​13355)
    • [expect] Expose AsyncExpectationResult and SyncExpectationResult types (#​13411)
    Fixes
    • [babel-plugin-jest-hoist] Ignore TSTypeQuery when checking for hoisted references (#​13367)
    • [jest-core] Fix detectOpenHandles false positives for some special objects such as TLSWRAP (#​13414)
    • [jest-mock] Fix mocking of getters and setters on classes (#​13398)
    • [jest-reporters] Revert: Transform file paths into hyperlinks (#​13399)
    • [@jest/types] Infer type of each table correctly when the table is a tuple or array (#​13381)
    • [@jest/types] Rework typings to allow the *ReturnedWith matchers to be called with no argument (#​13385)
    Chore & Maintenance
    • [*] Update @babel/* deps, resulting in slightly different stack traces for each (#​13422)
    Performance
    • [jest-runner] Do not instrument v8 coverage data if coverage should not be collected (#​13282)

    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Enabled.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Update dependency jest to v29.1.2

    Update dependency jest to v29.1.2

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | jest (source) | 29.1.1 -> 29.1.2 | age | adoption | passing | confidence |


    Release Notes

    facebook/jest

    v29.1.2

    Compare Source

    Fixes
    • [expect, @&#8203;jest/expect] Revert buggy inference of argument types for *CalledWith and *ReturnedWith matchers introduced in 29.1.0 (#​13339)
    • [jest-worker] Add missing dependency on jest-util (#​13341)

    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Enabled.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Update dependency jest to v29.1.1

    Update dependency jest to v29.1.1

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | jest (source) | 29.0.3 -> 29.1.1 | age | adoption | passing | confidence |


    Release Notes

    facebook/jest

    v29.1.1

    Compare Source

    Fixes

    v29.1.0

    Compare Source

    Features
    • [expect, @&#8203;jest/expect] support type inference for function parameters in CalledWith assertions (#​13268)
    • [expect, @&#8203;jest/expect] Infer type of *ReturnedWith matchers argument (#​13278)
    • [@jest/environment, jest-runtime] Allow jest.requireActual and jest.requireMock to take a type argument (#​13253)
    • [@jest/environment] Allow jest.mock and jest.doMock to take a type argument (#​13254)
    • [@jest/fake-timers] Add jest.now() to return the current fake clock time (#​13244, #​13246)
    • [@jest/mock] Add withImplementation method for temporarily overriding a mock (#​13281)
    • [expect] Export toThrow* matchers (#​13328)
    Fixes
    • [jest-circus, jest-jasmine2] Fix error messages for Node's assert.throes (#​13322)
    • [jest-haste-map] Remove __proto__ usage (#​13256)
    • [jest-mock] Improve spyOn typings to handle optional properties (#​13247)
    • [jest-mock] Fix mocking of getters and setters on classes (#​13145)
    • [jest-snapshot] Throw useful error when an array is passed as property matchers (#​13263)
    • [jest-snapshot] Prioritize parser used in the project (#​13323)
    • [jest-transform] Attempt to work around issues with atomic writes on Windows (#​11423)

    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Enabled.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Update dependency jest to v29.0.3

    Update dependency jest to v29.0.3

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | jest (source) | 29.0.2 -> 29.0.3 | age | adoption | passing | confidence |


    Release Notes

    facebook/jest

    v29.0.3

    Compare Source

    Features
    • [@jest/environment, jest-runtime] Allow passing a generic type argument to jest.createMockFromModule<T>() method (#​13202)
    • [expect] Expose ExpectationResult type (#​13240)
    • [jest-snapshot] Expose Context type (#​13240)
    • [@jest/globals] Add jest.Mock type helper (#​13235)
    Fixes
    • [jest-core] Capture execError during TestScheduler.scheduleTests and dispatch to reporters (#​13203)
    • [jest-resolve] Make sure to resolve module paths after looking at exports (#​13242)
    • [jest-resolve] Improve error on module not found deep in the require stack (#​8704)
    • [jest-snapshot] Fix typings of snapshot matchers (#​13240)
    Chore & Maintenance
    • [*] Fix inconsistent workspace prefixes (#​13217)
    • [jest-haste-map] Expose a minimal public API to TypeScript (#​13023)

    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Enabled.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Dependency Dashboard

    Dependency Dashboard

    This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

    This repository currently has no open or pending branches.

    Detected dependencies

    github-actions
    .github/workflows/ci.yml
    • actions/checkout v3
    • actions/setup-node v3
    npm
    package.json
    • browser-sync 2.27.11
    • jest 29.3.1
    • minify 9.1.0
    • npm-run-all 4.1.5
    • pleasantest 3.0.1
    • web-component-analyzer 2.0.0-next.4

    • [ ] Check this box to trigger a request for Renovate to run again on this repository
    opened by renovate[bot] 0
Owner
Cloud Four
We help forward-thinking teams craft accessible design systems and progressive web apps.
Cloud Four
Simple click-triggered navigation submenus. Accessible and progressively enhanced.

Clicky Menus! A project by Mark Root-Wiley, MRW Web Design Clicky Menus lets you create a progressively-enhanced, accessible one-level dropdown menu t

Mark Root-Wiley 76 Dec 6, 2022
Auto resizing textareas, can be used with bootstrap

auto-resize-textarea Auto resizes the height of any <textarea> to match the text input. No dependencies Works with Bootstrap Try it Demo page Reposito

Stefan Haack 5 Nov 16, 2022
Grupprojekt fΓΆr kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet fΓΆr kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide FΓΆr information om hur utv

Svante Jonsson IT-HΓΆgskolan 3 May 18, 2022
Hemsida fΓΆr personer i Sverige som kan och vill erbjuda boende till mΓ€nniskor pΓ₯ flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo fΓΆr kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A lightweight vanilla JavaScript app for expanding and collapsing blocks of text.

Read more button A lightweight vanilla javascript read more button for expanding and collapsing blocks of text. Features Choose how many text to keep

tyah 2 May 11, 2022
TSServer plugin & Utilities for "expanding" TypeScript types

ts-expand-type This repo provides a TS Server plugin which amends quick info to include the fully "expanded" type. "Expanded" means that object inters

Max Stoumen 6 Nov 20, 2022
A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mechanism to manipulate DOM elements

JavaScript Project to Manipulate DOM Elements DFlex A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mech

DFlex 1.5k Jan 8, 2023
Enhanced Sanity.io plugin development experience.

@sanity/plugin-kit NOTE This is a developer preview package meant for Sanity Studio v3 plugin development. For a v2 alternative, consider using Sanipa

Sanity 40 Dec 27, 2022
An enhanced VSCode extension for the Move programming language.

Move Analyzer Plus Provides language support for the Move programming language. Install on the VSCode Extension Marketplace: Move Analyzer Plus on the

The Moving Company 10 Aug 12, 2022
Enhanced interval features for Node.js, such as promisified interval and human readable time parsing.

Interval-next Interval-next is a package that extends Javascript's built-in setInterval() capabilities. You have a plain and promisified interval meth

Snowy 5 Jul 28, 2022
An enhanced HTML 5 file input for Bootstrap 5.x/4.x./3.x with file preview, multiple selection, and more features.

bootstrap-fileinput An enhanced HTML 5 file input for Bootstrap 5.x, 4.x, and 3.x with file preview for various files, offers multiple selection, resu

Kartik Visweswaran 5.2k Jan 3, 2023
This is a toy, it is an enhanced version of console.log

uu-console Hi, this is a toy. When you use console.log to print some logs, this can help you do some useless things. What is uu-console Support built-

KK Liu 2 Sep 25, 2022
The classical game of Liar's Dice enhanced with the usage of Zero-Knowledge Proof

Liar's Dice An online multiplayer game showcasing the potential of Aleo's Zero Knowledge Proof platform. Local deployment Prerequisites Setup dnsmasq

Kryha 4 Dec 15, 2022
The classical game of Liar's Dice enhanced with the usage of Zero-Knowledge Proof

Liar's Dice An online multiplayer game showcasing the potential of Aleo's Zero Knowledge Proof platform. Local deployment Prerequisites Setup dnsmasq

Kryha 3 Oct 20, 2022
A browser extension to simplify web pages and hide distracting things like hide cookie banners, auto-playing videos, sidebars, etc

Unclutter Browser Extension A browser extension to simplify web pages and hide distracting things like hide cookie banners, auto-playing videos, sideb

null 849 Jan 9, 2023
This simple project, show how work with async Fetch, function component and class component

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

DaliyaAsel 2 Feb 17, 2022
dynamic-component-app is an angular application for dynamic component template creation

MyApp This project was generated with Angular CLI version 14.1.0. Development server Run ng serve for a dev server. Navigate to http://localhost:4200/

Aniket Muruskar 7 Aug 26, 2022