polymerelements / paper-input Goto Github PK

Try to set the focus on input elements in https://elements.polymer-project.org/elements/paper-input?view=demo:demo/index.html, the underline no longer animate to show the element with focus.

I think it may have something to do with the capturing event listener both in paper-input-container and in IronControlState (imported through paper-input-behavior). See:

this.addEventListener('focus', this._boundOnFocus, true);

The focus animation, floating label animation and other stuff is broken since 1.0.4. I confirmed that it worked in 1.0.3.
See 911f56b#commitcomment-11789462

paper-input doesn't support HTML5 datalists since it doesn't propogate the "list" attribute to the iron-input element. This PR (#86) fixes that.

I tried the paper-input element on Chrome 42 on Linux and the labels are all at the top left corner.

I see that there's been some work done in "allow manual validation - pull #26", but as of current bits paper-input doesn't seem to pickup changes to the iron-input's validity until it's validate() method is called and validationMessage is never looked at. Should we expect seamless support for the underlying html input validity attributes in paper-input/paper-textarea or do we need to wire it up ourselves?

thanks

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

produces:

(this is happening before merging #26, so the probem isn't introduced there)

Typing letters in the numbers-only field looks like this:

This is because the paper-input-container's _handleValue isn't actually called in this case, so _inputHasContent isn't actually set.

One solution could be to always prevent invalid characters for type=number (which is the worst anyway). If that's ok, here's a PR for that: PolymerElements/iron-input#16

googlearchive/paper-input#171

Elements above and below do not jump around to create extra space for the floating label = GOOD

This auto validation make me seasick because the elements below jump all over the place when you fill in a form = BAD

Label doesn't do what it supposed to be doing like the other inputs

<paper-input-container>
       <label>Intoductie</label>
       <iron-autogrow-textarea id="a1" style="font:inherit;">
                <textarea id="t1" name="intro"></textarea>
       </iron-autogrow-textarea>
 </paper-input-container>

I have the following code:

<form id="search" action="/search/{{q}}" method="get">
    <paper-input no-label-float label="search" value="{{q}}"></paper-input>
</form>

On the (old), paper-input I could bind the q variable from the input value directly to the action="/search/{{q}}" so that when I submit the form I have the input value binded properly. Ho to achieve it with your paper-input component?

[Moved from Polymer/polymer. Quoted issue below.]

Hi,

I tried using the iron-input element [assume meant paper-input] and works fine when packaged as an app .crx on Chrome browser on mac or pc. When the same .crx ported to chromebook the app just loads fine but has following issues
1.The input element's hint turning into label wont just work.
2.If this input element is a part of form, then form submission wont read the values from these elements.

Attached screenshots from desktop chrome (just works fine) and chromebook (where it wont).

Thanks
Akhash


On Desktop :

As far as I understand there is no way to focus from JS.
I tried .focus() but it doesn't work.
I even tried to focus the inner from DevTools, but it doesn't work as well.

If the <input>'s value within a <paper-input-container> is data bound, the label does not properly float out of the way until the value changes

<paper-input-container>
    <label>Works</label>
    <input is="iron-input" value="Default value" 
</paper-input-container>

<paper-input-container>
  <label>Broken</label>
  <input is="iron-input" value="{{ someValue }}">
</paper-input-container>

Here's an example showing the bug: http://codepen.io/techniq/pen/QbqJyr?editors=100

😭

The <paper-textarea> element implements said behavior, but setting always-float-label has no effect.

I was wondering why focused was not working properly. Then I found out.

Focused property should have notify: true in paper-input-container

      /**
       * True if the input has focus.
       */
      focused: {
        readOnly: true,
        type: Boolean,
        value: false,
        notify: true
      },

See demo http://dzhioev.net:8080/arabic_input.html

Any small example how to style a paper-input? I need to change the color of the line under the input field.

Error message does not show up:

   <paper-input
      id="password"
      label="password"
      error-message="required"
      required></paper-input>

Bind Undefined properties like in an Object data, bind the value String in the input to 'undefined'

The undefined properties should bind like null properties as empty String.

The Code below

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-input/paper-input.html">
<dom-module id="user-demo">
    <style>
        :host {
            display: block;
        }
    </style>
    <template>
        <section> 
            <div>
                <paper-input label="Firstname" value="{{data.firstname}}" required></paper-input>
                <paper-input label="Lastname" value="{{data.lastname}}" required></paper-input>
            </div>
            <div>
                <div>Firstname : <span>{{data.firstname}}</span></div>
                <div>Lirstname : <span>{{data.lastname}}</span></div>
            </div>
        </section>
    </template>
</dom-module>

<script>
    Polymer({
        is: 'user-demo',
        properties: {
            userId: String,
            data: {
                type: Object,
                value: function () {  // Empty Data Object
                    return {  firstname: undefined  }
                } 
            }
        }

    });
</script> 

Polymer 1.0.4 landed user prevention of gestures.

Ideally, inputs should prevent tracking when a user starts in an input.

Example:

downHandler: function(e, detail) {
  detail.prevent('track');
}

<paper-input-container> has --paper-input-container-color to control styling for the label and underline color together - but probably it should be possible to control label and underline separately simply by using custom properties?

<paper-input label="Titel" error-message="Verplicht veld." name="title" value="{{title}}" required autoValidate></paper-input>

Why doesn't this worK?

Hello,

In polymer 0.5 you could clear the values of an input and then call updateLabelVisibility() to have the label float back to its original position. I can't find a way of doing this in polymer 0.9. Any suggestion on how to do this or perhaps re-implement the old function?

Thanks.

Unable to set focus on input by calling paperInputInstance.focus().

Workaround is to call it directly on its input field:
paperInputInstance.$.input.focus()

Same goes for .blur().

Additionally, on-focus, and on-blur don't work on paper-input.

name attribute is not currently supported for paper-textarea, which makes it not usable in a form. This will need an update in iron-autogrow-textarea.

Simple container with input and label. Expected behaviour that label will be float. It's not
Chrome desktop browser latest version.

    <paper-input-container>
        <label>Your name</label>
        <input is="iron-input">
    </paper-input-container>

https://github.com/PolymerElements/polymer-starter-kit does that: the repo's URL is https://developers.google.com/web/tools/polymer-starter-kit/

The iron-input in the paper-input element should inherit the text-align property.

With this small addition it wouldn't be necessary to use an own paper-input-container/iron input construct for a custom text-align.

Right now if the paper-input gets a text-align, the label changes, but not the input value.

I think the correct behaviour is for the label to always be floating at the top when the type is date.

Would be nice to have the autocomplete attribute in order to turn off the browser autocomplete on input

There should be a way to set the tabIndex so that it can bind down to <input is="iron-input">'s tabIndex.

The paper-input Basic test fails on "empty required shows error" (Chrome42 on Linux)

If you call paper-input.validate(), and the value is invalid (required and missing), error message shows up, but paper-input.invalid is false. I'd expect invalid to be true if errors are showing up.

    <paper-input
      id="username"
      label="username"
      error-message="required"
      required></paper-input>

   this.$.username.validate();

   this.$.username.invalid is false, should be true

sorry, no testcase, still trying to figure out how use paper-input on jsbin.

When I set bind-value={{address_1}} back to "" the label disappear until something is reentered in the input when I use chrome's form autocomplete.

                <paper-input-container >
                    <label>Address Line 1</label>
                    <input  id="address_1" is="iron-input" type="text" name="address" required bind-value="{{address_1}}"
                            allowed-pattern="/^[a-z0-9]{2,30}$/"
                            autocomplete="address-line1">
                    <paper-input-error>Valid address required</paper-input-error>
                </paper-input-container>

On 37.0.1, they look like this:

Text-areas and valid inputs look fine, though.

just a simple paper-input with on-value-changed='myCallback', fires the value-change event twice for each keypress, both events appear to be identical.

I've been having a hard time getting all the relevant imports in order to reproduce this in a jsbin, I've done so before where only polymer.html was required but I can't find a host that has all of the required dependencies with the correct directory layout to get this working. (rawgit.com breaks the relative imports)

Please give some tips, how to implement "autocomplete" add-on for paper-input-container.
It need 'focus/blur' event and change event.
Change event behaviour is close to paper-input-char-counter, but I didn't found any focus/blur listeners example.

https://elements.polymer-project.org/elements/paper-input

It includes paper-textarea, paper-input-container, paper-input-error, paper-input-char-counter document, but it doesn't have document of paper-input itself.

I can access demo page by typing URL directly, but the above document page doesn't have demo page link too.

https://elements.polymer-project.org/elements/paper-input?view=demo:demo/index.html&active=paper-textarea

It would be swell if autocorrect="off" and autocapitalize="off" were available on paper-input. I'm having to set these on $.input manually in code. These are very useful for form fields on mobile.

Type in a character anywhere at the start of an input. The cursor always moves to the end of the input.

googlearchive/paper-input#128

body{
       font-family: 'RobotoDraft', sans-serif;
       line-height: 140%;
 }

bug: (messes up line height on each line added)

<iron-autogrow-textarea id="a1">
         <textarea id="t1" name="intro"></textarea>
</iron-autogrow-textarea>

fix:

<iron-autogrow-textarea id="a1">
        <textarea id="t1" name="intro" style="font:inherit;"></textarea>
</iron-autogrow-textarea>

As shown below: