ember.js: input action on="change" does not fire

@rwjblue My expectation when using the {{input}} helper was that it was a syntactical sugar for creating an HTML input, while doing two-way binding for value and binding events. {{input}} is not a one-to-one binding for events because you cannot use click or change to bind directly to actions. You must use one of the documented events.

Reading the guide on this is most misleading because there is no mention of what you cannot use for an input.

http://guides.emberjs.com/v2.0.0/templates/input-helpers/

Especially, the actions section gives you a link to all events and tells you to just dasherize them. It isn’t until you dig in and finally reach this page:

http://emberjs.com/api/classes/Ember.Templates.helpers.html#method_input

Starting with this statement: “The helper allows some user events to send actions.”

That you realize you aren’t going crazy and click isn’t going to work.

I’m not saying that’s wrong; just unexpected. This caused me to jump into Slack and ask why. I was greeted with people as perplexed as I was.

To anyone still struggling with this, this seems to work just fine:

{{input value=value input=(action "valChange")}}

Copied from Stackoverflow

@jfuqua390 Your twiddle link
" Twiddle here: https://ember-twiddle.com/?openFiles=templates.application.hbs%2C " does not work, can you update?

BTW, just giving my solution to whoever comes here.

    <input
      multiple="true"
      onchange={{action "upload"}}
      accept="image/png,image/jpeg,application/pdf"
      type="file"
    />

    actions: {
      upload: function(event) {
        console.log('upload');
      }
    }

I haven’t tested all the actions but I just successfully used this:

{{input 
    value=value 
    autoresize=true 
    focus-in="inputFocusIn" 
    focus-out="inputFocusOut" 
    enter="removeFocus" 
}}

You can also just use the old fashioned html version and hbs actions to achieve it.

<input 
    value={{someValue}} 
    onblur={{action checkForValid value="target.value"}}
    oninput={{action validate value="target.value"}}
/>

Right now it supports these:

insert-newline
insert-newline
escape-press  
focus-in      
focus-out     
key-press     
key-up        
key-down

http://emberjs.com/api/classes/Ember.TextSupport.html

I’m new to Ember and spent the last hour tracking this one down. Unsure if this is because I’m a recent convert from Angular and I’m used to having ng-change available to me.

Right now I’m still not sure what actions are or have a feel for what they mean to me so I didn’t even know what to search for.

Regardless, I adore this framework. Coming from Angular, everything here feels well thought out and far more consistent.

Edit: No actions required from this post. I was just giving feedback.

I was having issues with this as well as I needed to change a save button if values of the inputs changed. I found that if you set your inputs inside a form and set the action “change” on the form itself it will run the action any time one of the inputs within the form is changed.

Twiddle here: https://ember-twiddle.com/?openFiles=templates.application.hbs%2C

See Event Names here: http://emberjs.com/api/classes/Ember.View.html#toc_event-names

If this isn’t the problem you are having please just ignore this 😄 .

@rwjblue @morganick I got bitten by this miss-understanding too. Is the following a correct, though simplified guideline on when to use what form for an input in a component?

Use-case	{{input}} vs <input>
Observe values on inputs	{{input}} or <input>
Checkboxes w/ actions	<input {{action="actionName" on="change"}} (to keep the click-event updating the checkbox’s checked property; Note that the observer on checked does not fire and that the checkbox’s checked property can’t be accessed(*); Also note that binding click in this way breaks the typical checkbox toggling behaviour(!));
Other input types	{{input}} if the event is supported by Ember.TextSupport otherwise <input>

I also think that we should change the Actions & Checkboxes section here.

*… IMO The only way to register an action handler and access the checkbox’s checked value reliably is to use the form onClick={{action "actionName"}} and check ev.target.checked in the action handler. I also noticed that onClick={{action "actionName"}} and {{action "actionName" on='click'}} behave differently: the first one passes the event-listener, while the second one doesn’t do that. Is that intended?

@stefanpenner: @JKGisMe and I recently discovered that using the {{input}} helper does not trigger actions for specified events. Here is a more detailed example: http://ember-twiddle.com/0830f4ed9f15df59801e

(twiddle by @JKGisMe)