ember-cli-textarea-autosize

ember-cli-textarea-autosize

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 uses the autosize.js library from Jack Moore: https://github.com/jackmoore/autosize.

Compatibility

• Ember.js v3.12 or above
• Ember CLI v2.13 or above
• Node.js v10 or above

Installation

ember install ember-cli-textarea-autosize

yarn add -D ember-auto-import webpack

Dependencies

ember-auto-import is being leveraged to bring in Jack Moore's autosize library as well as some keyevent constants. You don't need to do anything special but make sure your Ember app has ember-auto-import 2+ installed (which also requires you to install the latest webpack).

Demo

The demonstration web application can be found here: http://ember-cli-textarea-autosize.cybertooth.io/.

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.

Usage

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.

<TextareaAutosize @value='someModel.largeTextAttribute' />

Minimum Height (default is 2 rows)

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

<TextareaAutosize rows='6' ... />

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

<TextareaAutosize min-height='200px' ... />

Maximum Height (when to start scrolling)

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

<TextareaAutosize max-height='500px' ... />

Extras

The <TextareaAutosize /> 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.

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'
// ...now 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.

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.