polymerelements / iron-autogrow-textarea Goto Github PK
View Code? Open in Web Editor NEWTextarea that grows in height as more lines of input are entered
Home Page: https://webcomponents.org/element/PolymerElements/iron-autogrow-textarea
Textarea that grows in height as more lines of input are entered
Home Page: https://webcomponents.org/element/PolymerElements/iron-autogrow-textarea
The iron-autogrow-textarea
element causes the page to have a low performance in a scenario with many components in the same page.
When you type on the input, there is a big delay for the user.
No delay when the user is typing on the input.
There is a big delay for the user and if you get a profile from the performance
tab.
Only tested with Crome:
When forcing the use of ShadowDOM, the color
is not updated by setting --paper-input-container-input-color
.
With Shady DOM the styles from paper-input are interpreted last and applied; with Shadow DOM, the styles from the paper-input are applied before the "defaults" (from the user agent) causing the color to be reset to initial.
Setting color: inherit
for the textarea element, gets the styles applied as expected with shady
or shadow
DOM.
try adding padding and see what happens to the scrollbar
chrome
I detected that the "name" property is missing when declaring iron-autogrow-textarea, resulting on not submitting the value on form.
Before:
<iron-autogrow-textarea id="input" class="paper-input-input"
bind-value="{{value}}"
required$="[[required]]"
maxlength$="[[maxlength]]"></iron-autogrow-textarea>
After:
<iron-autogrow-textarea id="input" class="paper-input-input"
bind-value="{{value}}"
required$="[[required]]"
maxlength$="[[maxlength]]"
name$="[[name]]"></iron-autogrow-textarea>
If I put the value "undefined", then "undefined" appears. I would expect an empty string. With the iron-input it works very well.
Possible solution:
_bindValueChanged: function() {
var textarea = this.textarea;
if (!textarea) {
return;
}
// do not show undefined
textarea.value = this.bindValue === undefined ? '' : this.bindValue;
this.$.mirror.innerHTML = this._valueForMirror();
// manually notify because we don't want to notify until after setting value
this.fire('bind-value-changed', {value: this.bindValue});
},
This is an issue originally reported at PolymerElements/paper-input#577, I'm moving it here because to me the problem relies on the iron-autogrow-textarea
element.
When binding to a null variable, a red line appears above the textarea. This occurs in Firefox.
No red line.
Red line appears
http://jsbin.com/muqahekohi/edit?html,output
Put a paper-textarea element on page. Bind its value to a null variable and set it to required. Load page in Firefox.
Or:
The documentation calls for update()
to be called, whereas the function is only available as _update()
in the source.
Either update()
is missing, or the docs need to be updated.
The --iron-autogrow-textarea will apply to the internal textarea. But border and width etc. are also set on :host. Therefore it is not possible to change the style for example of the border.
:host {
--iron-autogrow-textarea {
border 1px solid red;
}
}
should set the border to red.
The element will have two borders (:host and textarea), black and red.
Copy the upper text in style-tag.
"Unless an explicit height or the maxRows property is set, it will never scroll."
Could we have an demo on how to get it to scroll by setting an explicit height?
The autofocus attribute should be a Boolean value according to the spec, but it is set as a String value with a default value of "off", making it automatically present on every iron-autogrow-textarea element (as autofocus="off").
This makes it impossible to turn off autofocus as there is no value to turn off a boolean attribute other than omitting it.
https://html.spec.whatwg.org/multipage/forms.html#the-textarea-element
Tested it on Chromium 43.0.2357.125 (64-bit)
PS: Just read the other issues, and it's mentioned on #13.
Adding CSS padding does not effectively style the element when used directly or with a mixin
The text has padding between itself and the border of the text area
The text area expands to be larger than the size of its container and/or the mirror div overlaps and covers the text.
<iron-autogrow-textarea>
element directly or the --iron-autogrow-textarea
mixinUsing Chrome, Android lollipop stock keyboard. Normal typing works fine. Swiping to input words results in every other word not appearing inside iron-autogrow-textarea.
Just noticed it while browsing the code.
Is there a way to have onblur event? For example:
<iron-autogrow-textarea class="paper-input-input" value="{{value::blur}}"></iron-autogrow-textarea>
The autocapitalize
attribute binding is missing on the internal <textarea>
element.
For example with <iron-autogrow-textarea autocapitalize="characters"></iron-autogrow-textarea>
On an iPad the keyboard should be blocked on uppercase mode.
On an iPad the keyboard isn't blocked on uppercase mode.
paper-textearea
or a iron-autogrow-textarea
element in the page.capitalize
attribute to characters
.I test it only in chrome, but example on demo page "Scrolls after 4 rows" doesn't work for me.
https://elements.polymer-project.org/elements/iron-autogrow-textarea?view=demo:demo/index.html&active=iron-autogrow-textarea
Hi!
in firefox 42.0
https://elements.polymer-project.org/elements/paper-input?view=demo:demo/index.html&active=paper-textarea
.mirror-text beyond the limit
I solved this problem by adding the parent of the style:
paper-input-decorator .mirror-text {
white-space: normal;
word-break: break-all;
}
it's a bug or a feature? )
@notwaldorf can you please change L286 to: var IS_IOS = navigator.userAgent.match(/iP(?:[oa]d|hone)/) && !navigator.userAgent.match(/OS 1[3456789]/);
for the 1.x
release, iOS has solved this issue from v13 onwards...
After a few hours of trying multiple combinations, including using mixins (--iron-autogrow-textarea
) I could not find a way to style the scrollbar of this element using webkit-scrollbar styles, such as:
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
Is this possible?
Any help on this would be appreciated!
I recently started getting this warning while using the paper-textarea element.
[iron-autogrow-textarea::_flattenBehaviorsList]: behavior is null, check for missing or 404 import
Looking through the code, there isn't any way to determine which behavior is missing. Running polymer lint on iron-autogrow-textarea doesn't show any missing import. The imports defined in the element are all installed locally.
The following stacktrace also appears
Uncaught TypeError: Cannot read property 'mirror' of undefined
at HTMLElement._updateCached (iron-autogrow-textarea.html:366)
at HTMLElement._observerEffect (polymer.html:1662)
at HTMLElement._effectEffects (polymer.html:1507)
at HTMLElement._propertySetter (polymer.html:1491)
at HTMLElement.__setProperty (polymer.html:1500)
at HTMLElement._applyConfig (polymer.html:2111)
at HTMLElement._afterClientsReady (polymer.html:2105)
at HTMLElement._ready (polymer-mini.html:70)
at HTMLElement._readyClients (polymer-mini.html:78)
at HTMLElement._ready (polymer-mini.html:66)
I am using Polymer 1.8.0, paper-textarea v1.1.23.
The application was created using the polymer init function.
The element (and my page) should load and render properly.
The page contents do not load.
paper-textarea
element in the page.Trying to use <iron-autogrow-textarea>
or elements based on it (such as <paper-textarea>
) fails in documents with an application/xhtml+xml
mimetype. This is due to two HTML-isms:
entity, which is not defined in XHTML mode. This can be replaced with the slightly less readable  
entity.<br>
, which is an unterminated tag in XHTML. The self-terminating form is safe to use in both XHTML and HTML mode.After applying the following diff, I am able to use <paper-textarea>
in an XHTML-mode document:
--- iron-autogrow-textarea/iron-autogrow-textarea.html
+++ iron-autogrow-textarea/iron-autogrow-textarea.html
@@ -71,7 +71,7 @@ this element's `bind-value` instead for
</style>
<template>
<!-- the mirror sizes the input/textarea so it grows with typing -->
- <div id="mirror" class="mirror-text" aria-hidden="true"> </div>
+ <div id="mirror" class="mirror-text" aria-hidden="true"> </div>
<!-- size the input/textarea with a div, because the textarea has intrinsic size in ff -->
<div class="textarea-container fit">
@@ -300,7 +300,7 @@ this element's `bind-value` instead for
while (this.rows > 0 && _tokens.length < this.rows) {
_tokens.push('');
}
- return _tokens.join('<br>') + ' ';
+ return _tokens.join('<br/>') + ' ';
},
_valueForMirror: function() {
The y-scrollbar is cropped.
Y-scrollbar should not be cropped.
The y-scrollbar is cropped.
https://www.webcomponents.org/element/PolymerElements/iron-autogrow-textarea/demo/demo/index.html
Male a scrollbar appear in any element.
The attached() callback sets this.bindValue
to this.value
, which doesn't appear to be defined anywhere. As a result, bindValue gets initialized to undefined
rather than the initial content of the textarea. This is particularly problematic because if the textarea is empty, its value should be the empty string rather than undefined.
Also, if the textarea contains initial content that exceeds its size, it won't grow to fit it until update() is called on its iron-autogrow-textarea.
I believe the simplest fix for these issues would be to change the attached() callback to simply invoke this.update()
. I am submitting a PR with this change and with tests that illustrate the issue.
Thanks!
this problem does not occur when removing the
Polymer.IronControlState
from the behaviours array of iron-autogrow-textarea.
Problem:
I want to use a for a section of text that I want disabled at first and to be editable at the click of a button to re-enable the editing of that text.
Approach:
Set it initially with
<iron-autogrow-textarea id="editable" disabled="true" placeholder="Hello!"></iron-autogrow-textarea>
And using javascript, I'm able to reassign the disabled to "false"
this.$.editable.disabled="false";
Checking with print statements, I see it starts out with "true" then changes to "false" when I click my edit button. However, I cannot edit the piece of text and seems to be still disabled.
Surprisingly I noticed that this element does not support change
event. Well, I think it is a critical issue, since paper-textarea
uses this component and paper-textarea
developer thinks that this iron-autogrow-textarea
fires change
event paper-textarea#Line79. The event is declared in the paper-textarea
doc, so it causes this bug#566
This code from remark iron-autogrow-textarea:
_bindValueChanged: function() {
console.log("_bindValueChanged");
var textarea = this.textarea;
if (!textarea) {
return;
}
textarea.value = this.bindValue;
this._update();
// manually notify because we don't want to notify until after setting value
this.fire('bind-value-changed', {value: this.bindValue});
},
_onInput: function(event) {
console.log("_onInput");
this.bindValue = event.path ? event.path[0].value : event.target.value;
this._update();
},
this._update() is called from _onInput and _bindValueChanged.
But after a call of _onInput, also _bindValueChanged is called.
As a result the double call of this._update().
iron-autogrow-textarea has no label for screen readers to read so when entering the field NVDA is quiet.
NVDA should read the label of the element.
NVDA is silent.
On an iron-autogrow-textarea with empty lines, a single long line will not take up one of these, and will instead expand the text area.
Steps to reproduce:
<iron-autogrow-textarea rows="4></iron-autogrow-textarea>
I don't know if this was intentional or not, but the name attribute doesn't connect to the underlying textarea. The docs make it seem like it should. It's an easy fix if it wasn't intentional, simply adding.
name$="[[name]]"
to the textarea definition fixes it and allows the autogrow-textarea to be submitted with a form as you would expect.
EDITED: Sorry, had the wrong values in there.
The typing in text area becoming slow because of the iron-auto grow behaviour.
Speed typing
slowness in typing
Components like paper-input-behavior and paper-input have been recently updated to assign a unique id to its inputs, but iron-autogrow-textarea still uses hardcoded ids for mirror and textarea:
<div id="mirror"
<textarea id="textarea"...
and should be:
<div id$="[[_mirrorId]]"...
<textarea id$="[[_inputId]]"
properties: {
_inputId: {
type: String,
value: ''
},
_mirrorId: {
type: String,
value: ''
}
}
...
...
_generateInputId: function() {
if (!this._inputId || this._inputId === '') {
this._inputId = 'input-' + Polymer.PaperInputHelper.NextInputID++;
}
},
_generateMirrorId: function() {
if (!this._mirrorId || this._mirrorId === '') {
this._mirrorId = 'mirror-' + Polymer.PaperInputHelper.NextInputID++;
}
},
...
get textarea() {
if (!this.$) {
this.$ = {}
}
if (!this.$.textarea) {
this._generateInputId();
this.$.textarea = this.$$('#' + this._inputId);
}
return this.$.textarea;
},
get mirror() {
if (!this.$) {
this.$ = {}
}
if (!this.$.mirror) {
this._generateMirrorId();
this.$.mirror = this.$$('#' + this._mirrorId);
}
return this.$.mirror;
},
and finally replacing all
this.$.textarea
this.$.mirror
with
this.textarea
this.mirror
It seems that I can't update the value of the autogrow textarea directly:
If I update it by assigning a value, nothing happens.
If I update the value attribute of the textarea field, the UI displays the updated value, but the outer textarea still returns the previous value.
Did I miss something there ?
The iron-autogrow-textarea
still doesn't react to element.focus()
. I have seen that there was a merged PR (PolymerElements/paper-input#129) in paper-input
which was linked in #34 , however this element does not inherit from paper-input
as far as I see?
The text area should get the cursor focus. When changing it to the native textarea
the focus()
works fine.
iron-autogrow-textarea
elements in the page. And programatically change the cursor focus to any element via focus()
Instead of this.$.myIronAutogrowTextarea.focus();
use this.$.myIronAutogrowTextarea.$$('textarea').focus();
Tested in latest stable Chrome.
When binding value
or bind-value
to iron-autogrow-textarea
, the bound data is never updated on Firefox and Edge. This leads to value
of paper-textarea
not notifying in 2.0-preview on Firefox and Edge either.
The data bound via value
or bind-value
should be updated, as in Chrome.
The data bound via value
or bind-value
is never updated on Firefox and Edge.
Polygit's Polymer 2 doesn't seem to work for Firefox or Edge, so I include the code to reproduce it here:
index.html:
<!doctype html>
<html lang="en">
<head>
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/test-app.html">
</head>
<body>
<test-app></test-app>
</body>
</html>
test-app.html:
<link rel="import" href="/bower_components/polymer/polymer-element.html">
<link rel="import" href="/bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
<dom-module id="test-app">
<template>
<style>
:host {
display: block;
}
</style>
<iron-autogrow-textarea value="{{prop1}}"></iron-autogrow-textarea>
<h2>Hello [[prop1]]</h2>
</template>
<script>
class MyApplication extends Polymer.Element {
static get is() { return 'test-app'; }
static get properties() {
return {
prop1: {
type: String,
value: 'test-app'
}
};
}
}
window.customElements.define(MyApplication.is, MyApplication);
</script>
</dom-module>
bower.json:
{
"name": "test",
"main": "index.html",
"dependencies": {
"iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#2.0-preview",
"polymer": "Polymer/polymer#^2.0.0-rc.3"
}
}
index.html
, test-app.html
, and bower.json
into files and copy them into a new folder.bower install
in this folder.polymer serve
in this folder.http://localhost:8081/
in the corresponding browser.Hello ...
reflects the changes, in Firefox and Edge it does not.I also tried these steps after applying PR #89 2.0 preview, but it doesn't change anything.
Inconsistent Ctrl-Z
Behavior in Chrome
When typing out text in an iron-autogrow-textarea
Ctrl-Z
command removes batches of text content per keypress. (Not individual characters.)
Using Ctrl-Z
in iron-autogrow-textarea
elements inconsistently only undoes one character at a time (particularly when there is more than one line of content).
The demo page for this element
Ctrl-Z
to undo.Ctrl-Z
to undo repeatedly.The behavior was observed only in Chrome.
It would be nice to have control over the selected text on focus, so that the entire value could be selected on focusing.
The textarea will grow to overflow outside of its provided area when provided with non-breaking text.
The textarea fills its area instead of growing outside horizontally.
Textarea grows and overflow elements when provided with non-breaking text.
Adding the following property to the .mirror-text class resolves the issue:
word-break: break-word;
It would be nice to be able to extend the .mirror-text class via an @apply mixin.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.