googlearchive/paper-input

A text input à la Material Design

paper-input

This element is compatible with Polymer 0.5 and lower only, and will be deprecated.
You can check out a similar 0.8-compatible version of this element at https://github.com/polymerelements/paper-input

See the component page for more information.

paper-input's Issues

Multiline input won't show content until user starts typing when in a core-overlay

As shown in this example: http://jsbin.com/bogocigazuya/7/edit

When a multiline paper-input field is in a core-overlay, the content is only visible after you start typing in the field. No issue with non-multiline inputs.

Setting a number to input's value throws exception

<paper-input id="input"></paper-input>

<script>
  addEventListener('polymer-ready', function() {
    document.querySelector('#input').value = 10;
  });
</script>

Exception in console:

Exception caught during observer callback: TypeError: undefined is not a function
    at paper-input.inputValueForMirror (http://localhost/components/paper-input/paper-input.html:158:56)

Add support for arbitrary validation functions

If the format of a valid input is too complicated to be described by a single regular expression, it would be nice to specify the name of a JS function to validate the field, instead of the default pattern attribute. It would accept a single string (the field value) and return a boolean result.

Obviously this can be done manually, but then you need to set up your own error reporting rather than being able to use the built in error attribute of this component.

Should support "require" field

There may be other useful fields that html5 input controls have, but at the very least, there should be a require field where the field is invalid until there's content in the control.

Animation moves to center on Firefox

http://jsbin.com/levit/2/edit

I've only noticed this with Firefox. Chrome and Safari look ok. Haven't had a chance to test on IE yet

value-attribute not updating until blurred

The default html input reports the current text as the value, updated in realtime as you type. paper-input does not do this, and only updates the value when the control loses focus. This makes it not work for a realtime suggestion feature using the oninput-event.
(As in: whatever value the input had when you focused it will be reported while you type, not the current value)

Tapping on right side of text in input does not place cursor correctly

If you type some text in an input and then attempt to focus the right side of the text, the cursor is not placed correctly. This seems to be because the #caret element is obstructing the tap.

Visual artifact when clearing paper-input

When inputValue is set to the empty string or null on a paper-input with a floating label, the label still floats, but only when the input has the default type -- password paper-inputs are unaffected. Setting the type explicitly to 'text' has no effect.

Default input context-menu is missing.

It's not possible to paste content via right-click or long-press on mobile.

paper inputs conflict with vimium Chrome plugin

When using paper inputs in Chrome with Vimium installed (default settings), typing in the input field produces strange behavior. E.g., attempting to type 'r' reloads the page, attempting to type 't' opens a new tab. This renders the paper inputs virtually useless for anyone using Chrome and Vimium.

This behavior is evident on Polymer's own paper inputs "demo" page.

input validation should not happen on load

What happens:
validated paper-input displays error messages on page load.
What should happen:
error messages should not be displayed on page load. Display messages after user input (on-blur), and before submit.
Every other form validation library, and html5 own do it this way.
Demo at: http://jsbin.com/ximudo/1/edit

Editorial: replicating html forms functionality is tough. I've never seen it done correctly.

Floating label wrong behaviour when changing value via JS

When you change via javascript the value of a paper-input of type number to 0 (zero), the floating label doesn't update its position.
Here's a quick example:

<polymer-element name="input-test">
    <template>
        <paper-input id="paper" floatinglabel label="a number from 0 to 255" error="" min="0" max="255" type="number" ></paper-input>
    </template>
    <script>
        (function(){

            Polymer('input-test', {
                ready: function(){
                    var self = this;
                    var observer = new PathObserver(this.$.paper, 'value');
                    observer.open(function(newValue, oldValue) {
                      self.onValueChanged(newValue, oldValue);
                    });
                    setTimeout(function(){
                        self.$.paper.value = 0;
                    }, 2000);
                    setTimeout(function(){
                        self.$.paper.value = 245;
                    }, 4000);
                    setTimeout(function(){
                        self.$.paper.value = 245;
                    }, 6000);
                    setTimeout(function(){
                        self.$.paper.value = 800;
                    }, 8000);
                    setTimeout(function(){
                        self.$.paper.value = 0;
                    }, 10000);  
                    setTimeout(function(){
                        self.$.paper.value = '';
                    }, 12000);
                    setTimeout(function(){
                        self.$.paper.value = null;
                    }, 14000);                  
                },
                onValueChanged: function( o, n ){
                    console.group('changed!');
                        console.log('inputValue', this.$.paper.inputValue);
                        console.log('value', this.$.paper.value);
                        console.log('validity', this.$.paper.validity.valid);
                        console.groupEnd();
                    console.groupEnd();
                }
            });
        }())
    </script>
</polymer-element>

Paper input not working on Firefox 31

The code snippet below renders weird on firefox 29 & 31. It works on chrome. Screenshots included

On chrome:

On Fifrefox 31 & 29

The code:

<div horizontal layout>
    <div flex>
       <paper-input label="Name" floatingLabel required></paper-input> <br />
       <paper-input label="Email" floatingLabel required type="email" style="margin-top:1em;"></paper-input>
     </div>
     <div flex>
        <paper-input label="Name" floatingLabel required></paper-input> <br />
        <paper-input label="Email" floatingLabel required type="email" style="margin-top:1em;">   </paper-input>
     </div>
</div>

Caret and label animations don't flip automatically for RTL

You can easily reproduce this by going to the demo page [1], and setting document.dir='rt'; in the js console.
The cause is that the caret and label css styles use "transform" tags, that don't automatically flip like "left" and "right".

[1] http://www.polymer-project.org/components/paper-input/demo.html

paper-input focus effect can cause overflow in parent element

http://jsbin.com/yajeso/1/edit

Backspace doesn't work on elements with pattern attribute set

For elements with a validation pattern, the backspace key doesn't work. This behaviour occurs in the official demo and in my own tests. New characters can be entered, but nothing can be deleted. This occurs whether or not the text content matches the pattern. I'm using Chrome 36.

paper-input does not support password input nor form submission

You can't use paper-input on a standard format to submit data, nor is there a standard password input.

Input effects don't animate in Firefox

Tested against stable and the FF nightlies:

Keyboard is not shown on Firefox OS 2.0

paper-input on Firefox OS 2.0 doesn't work - it doesn't show keyboard.

How to reproduce - use Firefox OS 2.0 on this page: http://www.polymer-project.org/components/paper-input/demo.html

Video that demonstrates this problem:
http://youtu.be/aDBcCCjDYg4

Shift-tab doesn't focus the previous input

Observed in paper-sampler.

• Focus the first input.
• Tab to the next input.
• Hit shift-tab.

Expected result
The previous input is immediately focused

Actual result
The focus leaves the second input but doesn't end up in the first input. Hit Shift-tab again. The first input is now focused.

Rendering incorrect on IE

paper-input renders incorrectly on IE: the label overlaps the input and the input shifts when text is typed into it.

Paper-input animation doesn't work when using appendChild

http://jsbin.com/cewomuhi/1/edit

When adding a paper-input using appendChild, the animations for the floatingLabel don't work.

paper-input fires change event twice

jsinb: http://jsbin.com/hiyiguxi/1/embed?live,html,console

You will see 2 change events in the console for a single change.

Resource not found after vulcanisation

After packaging an app which uses paper-input using Vulcanize to run as a Chrome packaged app, I get the error

GET chrome-extension://obbfcbdgidailjmcfjdgmlojpdcifmhd/third_party/paper-input/error-100.png net::ERR_FILE_NOT_FOUND

Floating label will not animate if in closed core-collapse

If a paper-input with a floating label is placed inside a closed core-collapse then when you open the core-collapse and click on the paper-input, the label will not animate above the input box as it was supposed to.

It will, however, animate if it is placed inside an open core-collapse.

For reference, view this gif:

Programatically adding value and floatingLabel

When you add a value programatically:
element[0].inputValue = value
The floatingLabel does not move from field:

Dirty fix:

attached: function() {
        if (this.multiline) {
          this.resizeInput();
          window.requestAnimationFrame(function() {
            this.$.underlineContainer.classList.add('animating');
          }.bind(this));
        }

        if (this.inputValue !== "") {
          this.$.label.classList.toggle('hidden', this.inputValue);
          this.$.floatedLabel.classList.toggle('hidden', !this.inputValue);
        }
      }, ...

I added a inputValue check on attached event.

placeholder in incorrect state sometimes when there's initial value

I've seen this after setting the inputValue either as an attribute or via the property. Placeholder is in an incorrect state in the middle of the input control and overlaps with the input itself.

Can't set default value

I want to set the input value using value attribute:

<paper-input value="Hello World"></paper-input>

But the input shows empty value.

This may be related to googlearchive/core-input#1 but I also see paper-input.ready is calling core-input.inputValueChanged() which seems to reset the value to "".

Don't animate the underline when pasting multiple lines of input

Paper Input does not accept value attribute if multi-line

When doing the following, everything works fine:
<paper-input multiline label="Enter multiple lines here"></paper-input>

I see an input that says "Enter multiple lines here", and it grows as I start hitting enter for newline characters. This is awesome.

However, the following does not appear to work:
<paper-input multiline label="Enter multiple lines here" value="sdsffsf"></paper-input>

Adding the value attribute cause things to break down, and I no longer see the paper-input field on my page. Meanwhile core-input behaves as I would expect

Editable field should support keyboard

<input type="number"> is really nice in that you can increment/decrement using the keyboard arrows. It would be killer if the editable field of paper-input also allowed that.

Realizing this inherits from core-input...that would have to be something that's configurable on that element?

When floatingLabel is set to false, the floatedLabel div should be set to display: none so paper-input takes up less space

Suggestions for simplifying

Here are a couple of random suggestions for simplifying the layout of paper-input:

• remove the vertical flex layouts
• use contentEditable for editing: this should (1) allow removal of the split rendering between single and multi-line, instead just dis-allow enter key, (2) allow removal of the mirror-text heigh calculation.

Paper demo on ios failing

Currently the online demo at http://www.polymer-project.org/components/paper-input/demo.html works.

But the demo at http://www.polymer-project.org/components/paper-elements/demo.html#paper-input fails on ios. The keyboard is shown, but when typing nothing is shown in the fields.

Potential XSS vulnerability in multiline input

Repro:

1. See the paper-input demo
2. Copy :"><img src=404 onerror=alert(1)> into the multiline input
3. Should see an alert pop up

Control for color change of element

Hi,

Is there an exposed control for changing the label and underline (and effects) colors especially during focus?

I'm asking because I tried putting the paper-input element in a page with a dark background.

Thanks.

Should support type = password

As the user types in content into the input field, the contents should be obfuscated at the UI layer, just HTMLInputElement.type = "password"

Floating label not positioned correctly if the value is set

Update paper-input/demo.html so a value is set:

<paper-input floatingLabel label="Floating label" value="Hello World"></paper-input>

would produce this:

Bound zero (0) value on load doesn't float label

Loading a paper-input element with an initial bound value equating to zero (0) does not cause the label to float when floatinglabel=true. Typing zero into the input does cause the label to float, but loading the value attribute with a bound value equating to zero does not. Probably a faulty boolean check...

<paper-input id="ZeroTest" label="ZeroTest" value="{{data.zerovalue}}" floatinglabel="true" required="true" readonly="false"></paper-input>

metadata.html incomplete

It seems that some properties (like label, floatingLabel) are missing in metadata.html

mutiline input style may broken

Here is the broken input, the input line goes above the placeholder

and following is part codes of the form

    <style>
    :host {
      display: block;
      position: relative;
      background-color: white;
      padding: 20px;
      width: 400px;
      font-size: 1.0rem;
      font-weight: 300;
      border-radius: 2px;
    }

    </style>

    <paper-shadow z="1"></paper-shadow>
    <div layout vertical start-justified>
      <div horizontal layout start-justified>
        <div class="card-label" flex>Create XX</div>
        <paper-icon-button icon="close" on-click="{{ onClickClose }}"></paper-icon-button>
      </div>
      <paper-input label="name" floatingLabel inputValue="{{ obj.title }}"></paper-input>
      <paper-input multiline floatinglabel label="description" rows="3" inputValue="{{ obj.description }}"></paper-input>

      <paper-fab icon="check" class="fab-success" self-end on-click="{{ onClickSubmit }}"></paper-fab>
    </div>

Could you guys please have a look?

None of the inputs work on iOS 7.x

Tested here:
http://www.polymer-project.org/components/paper-input/demo.html

in iOS 7.1.1 with an iPhone can focus into an input (though this can also be flaky) and see the focus animation. Keyboard comes up, but typing never shows up in the input.

On the emulator, the inputs work so this is an issue on real devices only.

Remaining accessibility issues

• disabled state should set aria-disabled="true"
• Floating label divs should be aria-hidden="true", since the internal input gets an aria-label with the same text

iOS Safari is not closing keyboard after losing focus

Keyboard is not automatically hidden after losing focus by tapping outside the input element. This is happening in iOS with Safari browser.

The main problem is that user navigates through the app with the keyboard opened, hiding sections of the app. User has to close keyboard manually and this is not very user friendly.

Typeahead support

Something like in https://github.com/PolymerLabs/typeahead-input/

Bug: Multiline Input Display Issues

From @term1nal (originally reported in dart-archive/paper-elements#44):

Firefox 31, Ubuntu 14.04 Unity

• On the expanding multi-line input, you continue to add new lines, the blue line continues to push its way down the page, but the text input area stays the same initial size, and just scrolls down. Also, this pushes elements down below the main card. It does not continue to expand downward, inhibiting access to elements that get pushed off of it (scrolling the page does not work).
• Pixel alignment is off with the static multi-line, making the line cut into the text.

add aria-labelledby to the input

http://www.w3.org/TR/2011/CR-wai-aria-20110118/states_and_properties#aria-labelledby

Tabbing into the input leaves artifacts

tabindex causes problem on focus

sample: http://www.jmuk.org/etc/input-tabindex.html

I added tabindex to two paper-input elements. By pressing tab keys, weird 'no-one-focused' status is inserted between the two input elements.

As I quickly checked this a bit more, I realized that <paper-input> itself becomes focusable if tabindex is specified, although the actual focus should be in the input element under the shadow root. This can be fixed by adding on-focus and on-blur on <paper-input> itself.

Keyboard doesn't pop up on mobile