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
iron-autogrow-textarea's People
Contributors
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
Stargazers
Watchers
Forkers
hadfieldn jaysunsyn smokybob kasperpeulen kevashcraft mrdewitt kevinwestern enlight jimsimon jab fredj jcdoig fl4p jpevarnek hobberwickey laborsync naoak josefjezek jamesxia4 kalaspuffar feuerste ruedigermoeller digint barong paladox kreinholt maritzstl chrisekelley shafil citizensfoundation reemardelarosa felixzapata timmo001 theworldtable polymerel yxwww yrral86 lordoftheflies rrdelaney capptions hrlink doublefint moodi2005 exnadella herrdietziron-autogrow-textarea's Issues
focus() still not working
Description
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?
Expected outcome
The text area should get the cursor focus. When changing it to the native textarea the focus() works fine.
Steps to reproduce
- Put multiple
iron-autogrow-textareaelements in the page. And programatically change the cursor focus to any element viafocus() - Open the page in a web browser.
Hacky Workaround
Instead of this.$.myIronAutogrowTextarea.focus(); use this.$.myIronAutogrowTextarea.$$('textarea').focus();
Example
Browsers Affected
Tested in latest stable Chrome.
Clean up deprecated properties and styles
y-scrollbar are cropped
Description
The y-scrollbar is cropped.
Expected outcome
Y-scrollbar should not be cropped.
Actual outcome
The y-scrollbar is cropped.
Live Demo
https://www.webcomponents.org/element/PolymerElements/iron-autogrow-textarea/demo/demo/index.html
Steps to reproduce
Male a scrollbar appear in any element.
Browsers Affected
- Chrome
value / bind-value not working in 2.0-preview on Firefox / Edge
Description
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.
Expected outcome
The data bound via value or bind-value should be updated, as in Chrome.
Actual outcome
The data bound via value or bind-value is never updated on Firefox and Edge.
Live Demo
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"
}
}
Steps to reproduce
- Copy the above code for
index.html,test-app.html, andbower.jsoninto files and copy them into a new folder. - Run
bower installin this folder. - Run
polymer servein this folder. - Open
http://localhost:8081/in the corresponding browser. - Type something into the text input field.
- In Chrome, the heading
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.
Browsers Affected
- Chrome
- Firefox
- Safari 9
- Safari 8
- Safari 7
- Edge
- IE 11
- IE 10
remark on the iron-autogrow-textarea
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().
_constrained() output and mirror content not compatible with xhtml
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:
- Use of the
entity, which is not defined in XHTML mode. This can be replaced with the slightly less readable entity. - Injecting code into innerHTML with
<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() {Red line when using textarea with required attribute in Firefox
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.
Description
When binding to a null variable, a red line appears above the textarea. This occurs in Firefox.
Expected outcome
No red line.
Actual outcome
Red line appears
Live Demo
http://jsbin.com/muqahekohi/edit?html,output
Steps to reproduce
Put a paper-textarea element on page. Bind its value to a null variable and set it to required. Load page in Firefox.
Or:
- Add a paper-textarea element with required attribute.
- Type anything and then delete it.
- Click outside the textarea so it is not focused.
GIF of the problem
Browsers Affected
- Chrome
- Firefox
- Safari 9
- Safari 8
- Safari 7
- Edge
- IE 11
- IE 10
disabling & enabling
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.
Update component to generate unique ids for mirror an textarea
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
<dom-module> tag is not closed. Even in latest 1.0.1 release
Just noticed it while browsing the code.
max-rows doesn't work
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
Impossible to turn off autofocus
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.
No text-cursor when editing in current firefox 39
this problem does not occur when removing the
Polymer.IronControlState
from the behaviours array of iron-autogrow-textarea.
[critical] on-change event not supported. Why?
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
Documentation and behaviour disagree
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.
Textarea should support onblur event
Is there a way to have onblur event? For example:
<iron-autogrow-textarea class="paper-input-input" value="{{value::blur}}"></iron-autogrow-textarea>Inconsistency in value field update
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 ?
how do you style this element?
try adding padding and see what happens to the scrollbar
chrome
safari shows a border?
Name attribute doesn't get attached to the 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.
Paper text area typing slow
Description
The typing in text area becoming slow because of the iron-auto grow behaviour.
Expected outcome
Speed typing
Actual outcome
slowness in typing
Live Demo
Steps to reproduce
Browsers Affected
- Chrome
- Firefox
- Safari 9
- Safari 8
- Safari 7
- Edge
- IE 11
- IE 10
Textarea does not work with value "undefined"
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});
},iOS 13 has non standard margin left fixes
@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...
-3px margin-left on IOS
I don't have an iphone to test this on but are you sure this is still correct? - e.g. Chrome's dev-tools (Chromium 57.0.2987.133) mobile view for the Iphone 5 is broken by the -3px:
If it is in-fact correct I assume someone should file a bug up-stream with chrome so that it can render it properly.
sizing issues with version on master
The version in master has issues in sizing the internal textarea
Inconsistent Ctrl-Z Behavior in Chrome
Inconsistent Ctrl-Z Behavior in Chrome
Expected outcome
When typing out text in an iron-autogrow-textarea Ctrl-Z command removes batches of text content per keypress. (Not individual characters.)
Actual outcome
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).
Live Demo
The demo page for this element
Steps to reproduce
- Focus on the first textarea of the page (the one that is a single line initially).
- Type a few words (but not enough to wrap to a new line).
- Type
Ctrl-Zto undo. - Note that the content is undone in batches or entirely.
- Type several more words (enough to cause the textarea to grow to 2 or more lines).
- Type
Ctrl-Zto undo repeatedly. - Note that the characters are undone individually until there is only one line remaining (in which case it is undone in a batch again).
Browsers Affected
The behavior was observed only in Chrome.
- Chrome
- Firefox
- Safari 9
- Safari 8
- Safari 7
- Edge
- IE 11
- IE 10
Missing binding of the `autocapitalize` attribute on the `<textarea>`
Description
The autocapitalize attribute binding is missing on the internal <textarea> element.
Expected outcome
For example with <iron-autogrow-textarea autocapitalize="characters"></iron-autogrow-textarea>
On an iPad the keyboard should be blocked on uppercase mode.
Actual outcome
On an iPad the keyboard isn't blocked on uppercase mode.
Live Demo
Steps to reproduce
- Put a
paper-texteareaor airon-autogrow-textareaelement in the page. - Set its
capitalizeattribute tocharacters. - Open the page on an iPad/Android or whatever with a virtual keyboard.
- Type multiple characters on the input.
Browsers Affected
- Chrome
- Firefox
- Safari 9
- Safari 8
- Safari 7
- Edge
- IE 11
- IE 10
No label for screen readers.
Description
iron-autogrow-textarea has no label for screen readers to read so when entering the field NVDA is quiet.
Expected outcome
NVDA should read the label of the element.
Actual outcome
NVDA is silent.
Steps to reproduce
- Add one or more input-textarea on the page with a label.
- Start NVDA
- Visit the page and tab through the inputs.
Browsers Affected
- Chrome
- Firefox
- Safari 9
- Safari 8
- Safari 7
- Edge
- IE 11
- IE 10
CSS padding does not effectively style the element
Description
Adding CSS padding does not effectively style the element when used directly or with a mixin
Expected outcome
The text has padding between itself and the border of the text area
Actual outcome
The text area expands to be larger than the size of its container and/or the mirror div overlaps and covers the text.
Live Demo
Steps to reproduce
- Add at least 1 em of padding to the
<iron-autogrow-textarea>element directly or the--iron-autogrow-textareamixin - Enter text in the text area until the formatting becomes painful
Browsers Affected
- Chrome
- [?] Firefox
- [?] Safari 9
- [?] Safari 8
- [?] Safari 7
- [?] Edge
- [?] IE 11
- [?] IE 10 <— does anything work in this browser?
Getting the textarea to scroll by setting an explicit height.
"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?
Question: Styling textarea scrollbar
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!
Wrapped lines expand textarea with available space
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:
- Create an iron-autogrow-textarea element with an initial number of rows.
<iron-autogrow-textarea rows="4></iron-autogrow-textarea> - Type a single long line into the text area so that the line wraps.
- The text area expands instead of using available space.
_flattenBehaviorsList behavior is null, check for missing or 404 import
Description
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.
Expected outcome
The element (and my page) should load and render properly.
Actual outcome
The page contents do not load.
Steps to reproduce
- Put a
paper-textareaelement in the page. - Open the page in a web browser.
- Watch the console for a warning
Browsers Affected
- [x ] Chrome
- Firefox
- Safari 9
- Safari 8
- Safari 7
- Edge
- IE 11
- IE 10
Not sending value on submit a form
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>Text selection on focus
It would be nice to have control over the selected text on focus, so that the entire value could be selected on focusing.
`color` styling not working using ShadowDOM
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.
[ paper-textarea ] .mirror-text beyond the limit ( firefox 42.0 )
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? )
Doesn't initialize properly with textarea content
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!
Performance problem with many elements in the page
Description
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.
Expected outcome
No delay when the user is typing on the input.
Actual outcome
There is a big delay for the user and if you get a profile from the performance tab.
Live Demo
Steps to reproduce
Browsers Affected
Only tested with Crome:
- Chrome
- Firefox
- Safari 9
- Safari 8
- Safari 7
- Edge
- IE 11
- IE 10
Word wrap is not enough when dealing with flex layouts
Description
The textarea will grow to overflow outside of its provided area when provided with non-breaking text.
Expected outcome
The textarea fills its area instead of growing outside horizontally.
Actual outcome
Textarea grows and overflow elements when provided with non-breaking text.
Possible solution
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.
Swipe input on stock android keyboard skips words
Using Chrome, Android lollipop stock keyboard. Normal typing works fine. Swiping to input words results in every other word not appearing inside iron-autogrow-textarea.
mixin not fully customizable
Description
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.
Expected outcome
:host {
--iron-autogrow-textarea {
border 1px solid red;
}
}
should set the border to red.
Actual outcome
The element will have two borders (:host and textarea), black and red.
Steps to reproduce
Copy the upper text in style-tag.
Browsers Affected
- Chrome
- Firefox
- Safari 9
- Safari 8
- Safari 7
- Edge
- IE 11
- IE 10
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.