Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Autogrow textarea fixes #2899

Closed
wants to merge 137 commits into from
Closed
Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
137 commits
Select commit Hold shift + click to select a range
dc30314
Makes textarea autogrow optional, resolves #1209
nantunes May 18, 2015
2665203
Fixes textarea auto grow inside scrollable container (resolves #2007 …
nantunes May 19, 2015
97e91aa
Adds support for textarea auto grow based on rows attribute (resolves…
nantunes May 19, 2015
eced631
update(build): fixes dry-run logic
Jun 9, 2015
4c1745f
update(docs): adds label overrides for FAB Speed Dial and FAB Toolbar
Jun 10, 2015
30a53c3
feat(fabToolbar): adds fabToolbar component
Jun 10, 2015
e813dcd
feat(fabSpeedDial): adds fabSpeedDial component
Jun 10, 2015
c985880
update(build): switches to conventional changelog fork with our prefe…
Jun 10, 2015
d765bdc
release: version 0.10.0-rc2
Jun 10, 2015
289274d
update version number in package.json to 0.10.0-rc2
Jun 10, 2015
c4e0196
update(docs): rolls back to AngularJS 1.3.15
Jun 10, 2015
c9d25dd
chore(tabs): refactors to remove link function from tabsDirective
Jun 10, 2015
fca1d5b
chore(changelog): fixes changelog in master
Jun 10, 2015
d0b385d
chore(changelog): pulled correct changelog from v0.10.0-rc1
Jun 10, 2015
781929d
fix(tabs): fixes infinite digests bug in Firefox
Jun 10, 2015
999e0da
fix(checkbox): adds ability to click links within checkbox
Jun 10, 2015
fb245fb
fix(mdMenu): fix rc2 complete break
rschmukler Jun 11, 2015
2513153
fix(mdMenu): re-enable keyboard controls
rschmukler Jun 11, 2015
94b03b0
fix(mdMenu): fix positioning breaking after scroll/resize
rschmukler Jun 11, 2015
67be5ce
fix(mdMenu): close on scope $destroy
rschmukler Jun 11, 2015
d7bfc86
feat(select): add mdOnClose expression eval event
rschmukler Jun 11, 2015
113ad44
fix(mdMenu): improve aria accessability
rschmukler Jun 11, 2015
33c3397
update(util): makes the method for locking scrolling more generic
Jun 11, 2015
deae957
fix(autocomplete): locks scrolling while autocomplete menu is visible
Jun 11, 2015
781a4bc
fix(select): fix focus color not picking up theming
rschmukler Jun 11, 2015
83a50f2
update(util): fixes scroll lock logic introduced in previous commit
Jun 11, 2015
e3e52c2
fix(tabs): nested tabs should now work properly when using md-tab-label
Jun 11, 2015
2552686
fix(tabs): fixes centered tabs for Safari
Jun 11, 2015
6019718
fix(tabs): fixes CSS to respect non-truthy values for `md-dynamic-hei…
Jun 11, 2015
3ac50ac
fix(theming): fixes bugs with progress circular and select theming
Jun 11, 2015
57e89dd
update version number in package.json to 0.10.0-rc3
Jun 11, 2015
e8ec2b5
fix(radioButton): fixes potential theming bug due to CSS specificity
Jun 11, 2015
ca2d5b7
update(docs): fixes log messages for dynamic demo
Jun 11, 2015
cc1d9d2
fix(tabs): calls on-select for the initially selected item
Jun 11, 2015
a0b3d5f
update(tabs): replaces hard-coded `transform` with
Jun 11, 2015
e53d9e9
chore(fabToolbar, fabSpeedDial): moves fabActions and fabTrigger into…
Jun 11, 2015
6781771
fix(autocomplete): fixes typo in autocomplete mouseup method
Jun 11, 2015
6911506
update(autocomplete): fixes somewhat major bug introduced in RC3 wher…
Jun 11, 2015
058efeb
chore(util): moves `nodesToArray` into `util.js` due to compile issue…
Jun 12, 2015
09694bc
update version number in package.json to 0.10.0-rc4
Jun 12, 2015
6d45f10
fix(tabs): programmatically changing tabs will now adjust pagination …
Jun 12, 2015
6bfc31e
fix(autocomplete): waits for screen to reposition on focus before
Jun 12, 2015
7b8efe2
fix(select): fixes screen jump in Firefox
Jun 13, 2015
afa213d
fix(autocomplete): prevents an error when passing null instead of an
Jun 15, 2015
43c273e
update version number in package.json to 0.10.0
Jun 15, 2015
5c08d5c
fix(menu): prevents scrollbar from unnecessarily showing up on the body
Jun 15, 2015
5bb722b
chore(menu): changed auto to hidden as there are some cases where aut…
Jun 16, 2015
8de8f7a
fix(button): fab buttons will no longer distort when used with flexbox
Jun 16, 2015
b1a144d
fix(button): fixes button styles so that <a> and <button> examples look
Jun 16, 2015
bbc53dc
update(docs): fixes docs site due to button style changes
Jun 16, 2015
1abc08b
update(build): fixes watch-demo logic
Jun 16, 2015
1be46cb
fix(autocomplete): fixes issue in Firefox/Linux where textChange is n…
Jun 16, 2015
0c66974
update(autocomplete): adds function check for itemChange
Jun 16, 2015
3e7ff23
fix(tabs): prevents error on empty tab list
robertmesserle Jun 17, 2015
b1046bc
fix(button): fixes button styles for components that override their d…
robertmesserle Jun 17, 2015
6315228
chore(toast): fix type typo in toast docs (`boolean` > `string`).
jelbourn Jun 17, 2015
7ca139a
fix(utils): update for Angular 1.4.1 compatibility
ThomasBurleson Jun 17, 2015
dab30b3
fix(icons): improve use of material-icons style
ThomasBurleson Jun 17, 2015
4623a9d
update(icon): removed **ddescribe** used for isolated karma tests
ThomasBurleson Jun 17, 2015
a01f62e
update(docs, icon): clarify auto-add of 'material-icons' style.
ThomasBurleson Jun 18, 2015
f452abe
update(build): use of Angular v1.4.1
ThomasBurleson Jun 18, 2015
62f5c7b
update(util): update initOptionalProperties() implementation
ThomasBurleson Jun 18, 2015
b8045df
feat(menu): do not propagate event in mdOpenMenu
Frank3K Jun 17, 2015
9fb0b35
update(tests, mocks): test for stopPropogation
ThomasBurleson Jun 18, 2015
6e9abdd
Switched RawGit for GitCDN
schme16 Jun 15, 2015
12a28aa
update(README): change docs to reference 0.10.0
ThomasBurleson Jun 18, 2015
5f006fc
feat(Virtual repeater) Implements a virtual repeater
kseamon Jun 16, 2015
436e5e2
update(tests, virtualRepeater): improved support for jQuery transform…
ThomasBurleson Jun 18, 2015
c134de9
update(tests): virtualRepeater transform tests
ThomasBurleson Jun 19, 2015
1a534e0
update(tests, virtualRepeat): module name change
ThomasBurleson Jun 19, 2015
c10bf48
update(travis): build angular-material before tests
ThomasBurleson Jun 19, 2015
dc3a09b
update(travis): build only scss files.
ThomasBurleson Jun 19, 2015
21d15ba
update(tests): karma config improvements
ThomasBurleson Jun 19, 2015
a2a06dd
update(demo): virtual repeat demo module name fixed.
ThomasBurleson Jun 19, 2015
dd11583
update(demo): improved description of virtual repeat demo
ThomasBurleson Jun 19, 2015
73b1df4
fix(theming): make theme inheritance not depend on DOM order
rschmukler Jun 21, 2015
691dd2f
fix(select): make select popup inherit theming
rschmukler Jun 21, 2015
17f38b0
fix(menu): fix options with x-ng-click and data-ng-click not working
rschmukler Jun 21, 2015
e08f51d
style(menu): fix md-button rendering incorrectly
rschmukler Jun 21, 2015
f94820e
fix(menu): fix error on clicking on menu container element
rschmukler Jun 21, 2015
082794f
style(menu): fix a.md-button rendering
rschmukler Jun 21, 2015
5cc9af4
test(phantomJs): patch in HtmlElement.click for phantomjs
rschmukler Jun 21, 2015
7ed0af6
fix(mdUtil): fix double scrollbar
rschmukler Jun 21, 2015
b4eac13
fix(disableScroll): fix scroll mask z-index blocking backdrops
rschmukler Jun 21, 2015
4a6cd56
fix(menu): fix potential scoping issues on mdMenu
rschmukler Jun 22, 2015
45005f2
update(release, codepen): use GitCDN urls
ThomasBurleson Jun 22, 2015
fb7b9b3
fix(css): stop using @extend for rules in a different module.
jelbourn Jun 22, 2015
c183e9b
fix(select): IE down arrow key error resolved
ThomasBurleson Jun 24, 2015
05119a7
fix(select): refresh optionNodes reference
ThomasBurleson Jun 24, 2015
7fe482c
fix(disableScroll): fix disable scroll creating scrollbar when none e…
rschmukler Jun 25, 2015
5d9874f
feat(select): BREAKING: allow md-input-container label and remove
MagicIndustries Jun 25, 2015
27b535e
update(menu): fix icon alignments in dropdown
ThomasBurleson Jun 25, 2015
bdf7039
update(docs): customize css for checkbox component
ThomasBurleson Jun 25, 2015
a0fd73e
update(docs): customize css for checkbox component
ThomasBurleson Jun 25, 2015
98e91ae
feat(virtualRepeat): allow for scrolling areas larger than the browser's
jelbourn Jun 24, 2015
2ccbc9d
fix(autocomplete): ngMessages should once again work with mdAutocomplete
Jun 26, 2015
9a045fb
feat(virtualRepeat): add md-start-index attribute.
jelbourn Jun 26, 2015
4be344b
fix(select): fix md-select with no placeholder outside of
rschmukler Jun 28, 2015
c7c7180
fix(menu): menu not closing with clicks that disable element
rschmukler Jun 28, 2015
16912ba
style(toolbar): fix allignment of md-menu to match md-button
rschmukler Jun 28, 2015
b8897db
feat(select): add md-container-class for custom styling
rschmukler Jun 28, 2015
ddfe523
fix(disableScroll): fix disable scroll breaking layout for fixed page
rschmukler Jun 28, 2015
044dbdc
fix(select): fix menu positioning inside fixed elements
rschmukler Jun 28, 2015
cbbb4b9
fix(select): fix double label issue using placeholder in md-input-con…
rschmukler Jun 28, 2015
1a8acd0
fix(select): mdInputContainer not realizing select had value
rschmukler Jun 28, 2015
e9f5a99
style(select,input): bring non-floating inputs and select into line
rschmukler Jun 28, 2015
4f7af22
fix(select): fix empty attribute for selected not selecting options
rschmukler Jun 28, 2015
862444a
fix(dialog): switch dialog to use disableScroll, fix focus trap
rschmukler Jun 28, 2015
1414b3c
test(select,dialog): fix broken tests
rschmukler Jun 29, 2015
288285c
fix(fabSpeedDial): fix many visual issues
topherfangio Jun 24, 2015
7314e12
fix(autocomplete): selecting an item while loading will now hide the …
Jun 26, 2015
556be5f
fix(tabs): improves performance by reducing the number of digests cau…
Jun 29, 2015
f5959cc
fix(autocomplete): fixes infinite digest issue in IE11
Jun 29, 2015
1a15d99
fix(mdUtil,dialog): fix issues when autocompletes and selects were in…
rschmukler Jun 30, 2015
44fda3d
fix(disableScroll): fix z-index getting set too large
rschmukler Jun 30, 2015
adcee7d
feat(select): add support for disabled
rschmukler Jun 30, 2015
68bd4f4
update(tabs): cleans up tabs code to remove unnecessary watchers
Jun 30, 2015
0ec6f16
update(build): adds scripts section to package.json with helpful dev …
Jun 30, 2015
ee60441
update(build): replaces url with origin for now
Jun 30, 2015
6fc9212
fix(mdTooltip): fix regression that broke tooltips on Firefox
Splaktar Jun 26, 2015
79dcbf7
feat(virtualRepeat): Add md-auto-shrink and md-auto-shrink-min
kseamon Jul 1, 2015
c164ef0
update(virtualRepeat): Make md-item-size optional
kseamon Jul 1, 2015
f5cd5a0
fix(tabs): prevents an error from being thrown if an empty attribute …
Jul 1, 2015
a161013
update(tabs): rolls back manual two-way binding of 'selectedIndex' fo…
Jul 1, 2015
61a0e53
fix($mdConstant): fix overlapping in media-queries
gkalpak Jun 25, 2015
caf6977
update(fabSpeedDial): fix positioning for mixed button sizes
cebor Jun 23, 2015
0fbe335
refactor(gulpfile): use forEach instead of filter
noamokman Jun 22, 2015
59c7335
upate(icon): Allow chaining on `$mdIconProvider.fontSet()` method
shprink Jun 11, 2015
52ca5e5
fix(textarea): Start at a height of one line
calebegg May 21, 2015
3062df0
update(docs): rolls back to Angular v1.3.15 until v1.4.2 is released
Jul 1, 2015
720ed90
feature(build): add concatenated SCSS file for distribution
myurasov Jun 22, 2015
b7146dc
chore(): simplify .gitignore
tkrotoff Apr 26, 2015
4c6de14
Makes textarea autogrow optional, resolves #1209
nantunes May 18, 2015
9363a13
Fixes textarea auto grow inside scrollable container (resolves #2007 …
nantunes May 19, 2015
c986e7b
Adds support for textarea auto grow based on rows attribute (resolves…
nantunes May 19, 2015
adc0b99
Merge branch 'autogrow-textarea-fix' of github.com:nantunes/material …
nantunes Jul 1, 2015
9d81e07
Avoid "rows" attribute unintended overwrite by default value
nantunes Jul 1, 2015
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 49 additions & 5 deletions src/components/input/input.js
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ function labelDirective() {
* The purpose of **`md-maxlength`** is exactly to show the max length counter text. If you don't want the counter text and only need "plain" validation, you can use the "simple" `ng-maxlength` or maxlength attributes.
* @param {string=} aria-label Aria-label is required when no label is present. A warning message will be logged in the console if not present.
* @param {string=} placeholder An alternative approach to using aria-label when the label is not present. The placeholder text is copied to the aria-label attribute.
* @param md-no-autogrow {boolean=} When present, textareas will not grow automatically.
*
* @usage
* <hljs lang="html">
Expand Down Expand Up @@ -228,7 +229,21 @@ function inputTextareaDirective($mdUtil, $window, $mdAria) {
}

function setupTextarea() {
if(angular.isDefined(element.attr('md-no-autogrow'))) {
return;
}

var node = element[0];
var container = containerCtrl.element[0];

var min_rows = NaN;
var lineHeight = null;
// can't check if height was or not explicity set,
// so rows attribute will take precedence if present
if(node.hasAttribute('rows')) {
min_rows = parseInt(node.getAttribute('rows'));
}

var onChangeTextarea = $mdUtil.debounce(growTextarea, 1);

function pipelineListener(value) {
Expand All @@ -243,18 +258,47 @@ function inputTextareaDirective($mdUtil, $window, $mdAria) {
onChangeTextarea();
}
element.on('keydown input', onChangeTextarea);
element.on('scroll', onScroll);

if(isNaN(min_rows)) {
element.on('scroll', onScroll);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't really understand what onScroll does... Hence the if block.

}

angular.element($window).on('resize', onChangeTextarea);

scope.$on('$destroy', function() {
angular.element($window).off('resize', onChangeTextarea);
});

function growTextarea() {
node.style.height = "auto";
node.scrollTop = 0;
var height = getHeight();
if (height) node.style.height = height + 'px';
// sets the md-input-container height to avoid jumping around
container.style.height = container.offsetHeight + 'px';

// temporarily disables element's flex so its height 'runs free'
element.addClass('md-no-flex');

if(isNaN(min_rows)) {
node.style.height = "auto";
node.scrollTop = 0;
var height = getHeight();
if (height) node.style.height = height + 'px';
} else {
node.setAttribute("rows", 1);

if(!lineHeight) {
node.style.minHeight = '0';

lineHeight = element.height();

node.style.minHeight = null;
}

var rows = Math.max(min_rows, Math.round(node.scrollHeight / lineHeight));
node.setAttribute("rows", rows);
}

// reset everything back to normal
element.removeClass('md-no-flex');
container.style.height = 'auto';
}

function getHeight () {
Expand Down
4 changes: 4 additions & 0 deletions src/components/input/input.scss
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,10 @@ md-input-container {
outline: none;
box-shadow: none;
}

&.md-no-flex {
flex: none !important;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We try to avoid !important overrides. Is this the only solution?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't really love this solution, as md-no-flex is an "utility" class. But I had no success defining temporarily the 'flex: none' on the element directly (where it would take precedence over all the other rules).

Do you have any suggestions?

}
}

ng-messages, data-ng-messages, x-ng-messages,
Expand Down