[Textfield] add name attribute and reflect input value to element attribute

[eskan]

Hi Liters,
a PR to improve text-field component, and get it work with "iron-form":

• add the name attribute to the embedded input.
• reflect input value to element value attribute.
• fire value-changed event.
• fire change event when shadowRoot

Regards,

[pitus]

I see a commit with an input on-change call _updateValue() but how can I bind to this change in my own component using the mwc-textfield? The on-change doesn't fire for mwc-textfield, what's the right way to do this?

Also, it would be useful to be able to handle the on-input changes as well, not just on-change, so that the user can get real-time feedback in some cases as they're typing.

[eskan]

@pitus .. you're right .. i'll update this PR with on-input instead of on-change.
i mostly use this component in form but i agree this element should fire event.

[markcellus]

Just out of curiosity, cant the value attribute be binded to?

[eskan]

@mkay581 i guess you think about a 2 ways binding like Polymer 1,2 did but with lit and lit-element that doesn't work.
when a property change, _render is called to apply change to the dom : "no intelligence here" or "hidden magic".
if you want to display the value of the input somewhere else you need to do something like this :

_render({_myInput}) {
return html`<label>${_myInput}</labe>
<mwc-textfield on-input=${(e) => this._myInput = e.target.value}></mwc-textfield>`
}

[markcellus]

hmm, on the Polymer 3 site, it shows an example of data binding using lit-html.

since the code in this component assigns the new value to value property, why wouldn't I be able to do this with the current implementation?

return html`<label>{{_myInput}}</label>
  <mwc-textfield value="{{_myInput}}"></mwc-textfield>`
}

EDITED: small syntax change

[eskan]

@mkay581 .. ok, i understand the confusion, Polymer and lit-html both use html`` helpers :
https://www.polymer-project.org/3.0/docs/devguide/dom-template but they are totally different.
My bad, i thought only with LitElement :/ so if you use Polymer-Element you'll be able to bind value with this PR if you use LitElement you should write it.

[pitus]

@eskan For some reason on-change doesn't fire for mwc-textfield while the on-input does. I've added both to the mwc-textfield the same way as in the recent commit - they both fire within the mwc-textfield calling my _setName(e) but only on-input is fired within my own control (which adds the on-input to the mwc-textfield). What's 'blocking' the on-change event, why doesn't it propagate? What am I missing?

I have the same problem with the mwc-checkbox where the on-change doesn't get fired (my component is not notified of change in the checkbox) but ... if I add an on-click handler (both, to my code and within the mwc-checkbox to call its _inputChangeHandler()) then it all works fine ...

So what's wrong with my using <mwc-XXX on-change="${this._handler}">... Why don't they get fired?

[eskan]

@pitus i've updated this PR to allow change and value-changed events, may you test this ?

[omar-belkhodja-bacdev]

Is it normal that you didn't use "composed: true" in the CustomEvent ?

[eskan]

@omar-belkhodja-bacdev : input change event isn't a composed event so i reproduce this behavior

[eskan]

outdated