https://github.com/cybertoothca/ember-cli-textarea-autosize
An Ember add-on providing a text-box that autosizes to fit the supplied/keyed content.
https://github.com/cybertoothca/ember-cli-textarea-autosize
autosize ember-addons textarea textarea-component
Last synced: 2 months ago
JSON representation
An Ember add-on providing a text-box that autosizes to fit the supplied/keyed content.
- Host: GitHub
- URL: https://github.com/cybertoothca/ember-cli-textarea-autosize
- Owner: cybertoothca
- License: mit
- Created: 2016-10-07T03:56:17.000Z (over 9 years ago)
- Default Branch: main
- Last Pushed: 2023-02-22T20:22:36.000Z (over 3 years ago)
- Last Synced: 2024-11-08T15:54:43.093Z (over 1 year ago)
- Topics: autosize, ember-addons, textarea, textarea-component
- Language: JavaScript
- Homepage: http://ember-cli-textarea-autosize.cybertooth.io/
- Size: 1.13 MB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ember-cli-textarea-autosize
[](http://badge.fury.io/js/ember-cli-textarea-autosize)  [](http://codeclimate.com/github/cybertoothca/ember-cli-textarea-autosize)
[](http://emberobserver.com/addons/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](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/](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 `` 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`.
```handlebars
```
### Minimum Height (default is 2 rows)
If you need to set the minimum height of the ``, set the
`rows` property:
```handlebars
```
...or you can specify the `min-height` property
```handlebars
```
### Maximum Height (when to start scrolling)
The `` will continue to grow indefinitely unless you set the
`max-height` property:
```handlebars
```
## Extras
The `` automatically:
1. Incorporates a mixin that corrects a quirk in Ember where the
`autofocus=true` feature works across template transitions.
1. Includes a mixin that will select any text when the textarea is
focused.
1. 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:
```javascript
// 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](https://github.com/cybertoothca/ember-cli-text-support-mixins#mixins).
## Contributing
See the [Contributing](CONTRIBUTING.md) guide for details.
## License
This project is licensed under the [MIT License](LICENSE.md).