input action on="change" does not fire

[monicao]

The change event does not seem to work for actions on the input helper.

{{input type="range" value=currentValue action="foo" on="change"}}

Example for range input: http://emberjs.jsbin.com/zisejusahi/edit?html,js,output
Example for text input: http://emberjs.jsbin.com/piqelexime/1/edit?html,js,output

[stefanpenner]

strange:

work around: http://emberjs.jsbin.com/yedigeyeda/1/edit?html,js,console,output

[pixelhandler]

This is similar to #10305

[Fryie]

this is really annoying in acceptance tests, where the fillIn helper won't trigger any "keyup" event, so I have to do:

fillIn('#my-input', 'some-val');
find('#my-input').trigger('keyup');

if I want events to properly fire (since I can't use the change event, which probably would be triggered by fillIn).

[rwjblue]

@Fryie - That is unrelated to the issue reported here. Seems similar to #11016 though.

[Fryie]

Apologies, I only wanted to point out that 'keyup' is not a feasible workaround, so in a sense it's related. :)

[morganick]

@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)

[runspired]

Actually a lot of events don't work on the input helper right now, including anything mouse related.

[rwjblue]

Ya, I'm tracking this. Will try to fill in what is happening when not mobile.

[SillyButt]

This is a serious problem. Setting two and more actions can't be don't for input helper. Can't believe that Ember 2.0.0 still hasn't such attributes like on-input="" and on-change="".
Hope this will be fixed ASAP...

[KTKate]

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"}}
/>

[EricSchank]

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

[rwjblue]

Ya, I thought that this issue was reporting a regression with {{input action="foo" on="focus-in"}} (which is aliased to {{input focus-in="foo"}}), but I was mistaken (that works properly with any of the events listed above).

This is specifically about using on="change", but I am not certain that this is something that we intend to support at the moment.

[KTKate]

ok so yes, i have to add a (mut model.value) to the action on change for the html input version.

Which leads me to wonder... what's the point of having an {{input if you can't really use it? It feels like <input is flawed because you can't just easily do 2 way binding with hbs but at the same time {{input is somewhat unusable because of its event handling restrictions. Wouldn't we better off not having the {{input at all so as not to confuse things?

[rwjblue]

@JKGisMe - Huh? How is {{input}} flawed? It works and is used by a huge majority of Ember applications without incident....

[KTKate]

So in the twiddle linked above... How would you do all those in with the {{input?

In my work project, I inadvertently ended up using the html way for all input boxes before this got brought up but now I'm wondering if it was bc I have a ton of actions attached to events that just worked this way.... :P too bad the dev doesn't actually remember.

[morganick]

@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.

[greyhwndz]

I wonder if there is already an update on this

[theotherzach]

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.

[davidsteinberger]

@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?

[jfuqua390]

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 😄 .

[ldong]

@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');
      }
    }

[abepetrillo]

@ldong I tried your work around (admittedly on an old version of ember) and received the following error:

Uncaught ReferenceError: Invalid left-hand side in assignment

Not sure if I'm missing something?

[jcfinnerup]

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

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

Copied from Stackoverflow

[pixelhandler]

@EricSchank @Fryie @JKGisMe @MarkMT @SillyButt @abepetrillo @davidsteinberger @greyhwndz @jcfinnerup @jfuqua390 @ldong @locks is this still an issue, perhaps we should close or create a new reproduction of this, what do you think?

[pixelhandler]

Closing for now there are plenty of ways to create a working change event

[harirajv]

@jcfinnerup any ideas on how to test this? How would you create the input event (with a helper like triggerEvent) ?