Hitting enter key on Internet Explorer text boxes with multiple buttons

[davidmcch]

If you have a form with multiple buttons and using Internet Explorer (tested with IE 10), the action attribute on Ember.TextField will not work for any action other than the first button.

Here's a JSFiddle: http://jsfiddle.net/davidmcch/Nm9a6/2/

To re-create:

1. Click within "Text 2" textbox (to put in focus)
2. Hit enter

In Chrome, the message is the expected "Action #2 (Two)". In Internet Explorer, the message is "Action #1 (one)". This occurs in Internet Explorer 10 and IE9 compatibility mode. (IE8 and lower doesn't work at all with the JSFiddle example.)

I looked into Ember.TextSupport, and I think it's an issue not suppressing the default "key-press" event behavior.

In Chrome, the events (as fired within the sendAction function) are:

1. Click into textbox: generates focus-in event
2. Hitting enter: generates key-press and then immediately the enter event

In IE, the enter event is never fired.

I'm not sure if this is something that should be handled within Ember or whether we need to handle it elsewhere (customized View class?).

[nathanhammond]

Can confirm that this difference in behavior exists. Whether it should be classified as a bug is an entirely different story and a matter of opinion. 😄

What is happening becomes quite clear with this JS Bin:
http://emberjs.jsbin.com/jaqut/1/edit

Default browser form behavior is that pressing "enter" inside an <input type="text" /> submits the form. Internet Explorer is guessing at what to do since you didn't create a form element. That guess is then "triggering a click" on whichever button was first included into the DOM.

In my example I've wrapped each section with a form element which also gets interesting behavior. In Chrome double events (the action is handled for enter and then form submission). In IE, just the form submission (button) events fire.

Generally I would not rely on IE's behavior, nor would I try to override the "enter" handling on an input text as that seems brittle.

Nevertheless, we have a difference in functionality here, which we should probably deal with. Interestingly, this might be considered a jQuery bug as opposed to an Ember bug (without doing any tracing of it at all).

@wagenet Optional close, but should probably get a few seconds of thought at a core team meeting if we're not going to address it/punt it to somebody else.

[Hrishi-kaybus]

I faced this issue and I used this workaround:
I wrapped Ember.TextField inside a form tag and moved the action onto the form tag with bubbles = false and triggering the action on submit.

[wagenet]

I often wrap fields with forms and use action on the form. It's a nice setup even without the IE issue.

[rondale-sc]

I also like wrapping fields with form tags. This might be something to look at if you want to have some structure around that: https://github.com/dockyard/ember-easyForm

[wagenet]

Not sure how much more there is to do here.

[meirish]

Adding type="button" to your buttons will keep IE from doing this.

I tested the following bin in IE10 and it worked as expected:
http://emberjs.jsbin.com/nogoyisaki/2/edit

[simefield]

@meirish — nice one!