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.
- Ember.js v3.12 or above
- Ember CLI v2.13 or above
- Node.js v10 or above
ember install ember-cli-textarea-autosize
yarn add -D ember-auto-import webpack
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
).
The demonstration web application can be found here: http://ember-cli-textarea-autosize.cybertooth.io/.
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.
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
.
If you need to set the minimum height of the <textarea>
, set the
rows
property:
...or you can specify the min-height
property
The <textarea>
will continue to grow indefinitely unless you set the
max-height
property:
The <TextareaAutosize />
automatically:
- Incorporates a mixin that corrects a quirk in Ember where the
autofocus=true
feature works across template transitions. - Includes a mixin that will select any text when the textarea is focused.
- Will attempt to submit the nearest form when
CTRL+ENTER
is pressed.
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.
See the Contributing guide for details.
This project is licensed under the MIT License.