Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

ember-cli-textarea-autosize GitHub version

npm version downloads CircleCI Code Climate Dependencies ember-observer-badge License

An Ember addon that provides a textarea component that adjusts its height according to the supplied text. Included are also several mixins that can be used to ensure autofocus works properly, focused text inputs have their text selected, and ctrl+enter will submit the nearest form.

This addon installs from bower and uses the autosize.js library from Jack Moore:

Tested Against

ember-lts-2.4 ember-lts-2.8 ember-lts-2.12

ember-release ember-beta ember-canary


The demonstration web application can be found here:

What Does This Addon Do?

This addon gives you access to the following component:

  • textarea-autosize - an extension of the Ember.TextArea that produces a <textarea> that grows in height to fit the supplied content.

Mixins Moved To ember-cli-text-support-mixins Add-On

Before 1.1 the TriggerFocus, FocusSelectsText, and CtrlEnterSubmitsForm mixins were available in this add-on. They are no longer here, and if you were using them your code breaks.

You should be able to easily move your code over to the ember-cli-text-support-mixins variation:

// import TriggerFocus from 'ember-cli-textarea-autosize/mixins/trigger-focus'
// becomes ...
import TriggerFocus from 'ember-cli-text-support-mixins/mixins/trigger-focus';

// import FocusSelectsTextMixin from 'ember-cli-textarea-autosize/mixins/focus-selects-text';
// ... now becomes ...
import FocusSelectsText from 'ember-cli-text-support-mixins/mixins/focus-selects-text';

// import CtrlEnterSubmitsFormMixin from 'ember-cli-textarea-autosize/mixins/ctrl-enter-submits-form';
// ... now becomes ...
import CtrlEnterSubmitsForm from 'ember-cli-text-support-mixins/mixins/ctrl-enter-submits-form';

Head over here for the mixin documentation.


  • Ember >= 1.13.0
  • Ember CLI


Like most other Ember addons:

ember install ember-cli-textarea-autosize


When working through the Ember upgrade process, I recommend invoking the ember install ember-cli-textarea-autosize command once you are done to get the latest version of the addon.


This textarea component extends the ember-cli-text-support-mixins add-on's text-area component. This text area does not accept a block, instead always pass your value to the value attribute.

{{textarea-autosize value=someModel.largeTextAttribute}}

Minimum Height (default is 2 rows)

If you need to set the minimum height of the <textarea>, set the rows property:

{{textarea-autosize rows=6 ...}}

...or you can specify the min-height property

{{textarea-autosize min-height="200px" ...}}

Maximum Height (when to start scrolling)

The <textarea> will continue to grow indefinitely unless you set the max-height property:

{{textarea-autosize max-height="500px" ...}}

For additional information about the Ember.TextArea:


The {{textarea-autosize}} automatically:

  1. Incorporates a mixin that corrects a quirk in Ember where the autofocus=true feature works across template transitions.
  2. Includes a mixin that will select any text when the textarea is focused.
  3. Will attempt to submit the nearest form when CTRL+ENTER is pressed.

Check out these extra mixins at ember-cli-text-support-mixins.

Ember Addon Building And Testing



git clone

With NPM

npm install

With Yarn


Running The Dummy Application

Running Addon Tests

  • npm test (Runs ember try:testall to test your addon against multiple Ember versions)
  • ember test
  • ember test --server

Building The Addon

  • ember build

For more information on using ember-cli, visit

Linking This Addon For Local Testing


  1. From the command line at the root of this project run the npm link command to link this addon within your local node repository.
  2. From the other Ember project that you wish to test this addon in, execute the following command: npm link ember-cli-textarea-autosize.
  3. Now in that same other Ember project, you should go into the package.json and add the ember addon with the version *. It will look something like this: "ember-cli-textarea-autosize": "*". Now when/if you execute npm install on this other project it will know to look for the linked addon rather than fetch it from the central repository.
  4. Lastly, in the other Ember project run the blueprint for the ember-cli-textarea-autosize addon by executing: ember g ember-cli-textarea-autosize. This will install the appropriate Ember Addons and Bower dependencies.


  1. Remove the addon from your local node repository with the following command (that can be run anywhere): npm uninstall -g ember-cli-textarea-autosize
  2. Remove the reference to the ember-cli-textarea-autosize in your other project's package.json.
  3. Run an npm prune and bower prune from the root of your other project's command line.

Deploying The Dummy Application

Make sure your ~/.aws/credentials file has a profile named cybertooth with a valid key and secret,

aws_access_key_id = <KEY>
aws_secret_access_key = <SECRET>

Deploy by invoking the following command: ember deploy production

Confirm your changes are showing up in our S3 container:

Releasing & Publishing To NPM

npm version x.y.z-sub.#
git push
git push --tags
npm publish