Ember.js: Input helper shows unwanted behaviour in firefox with jquery 2.2.1

[crudo1f]

I have a component which uses the input helper like this:
{{input value=model.value focus-in='focusInAction'}}

Since the upgrade to Ember 2.4.x these inputs show a strange behaviour. The cursor is misplaced on a fixed spot (left side and shifted down) in the text input or in some cases it is not visible. Beside this the input and all actions work as expected. The error does only appear on inputs with the focus-in action handled and just in Firefox.

Till now I could narrow this down to the new jquery version (2.2.1) which comes with the latest Ember version. If I use jquery 2.1.4 with Ember 2.4.x everything works as expected.

Example with missing cursor in FF:
https://ember-twiddle.com/50fdee3aee87c09c7fd8

Any ideas about that?

[pixelhandler]

@crudo1f please create a code example, e.g. jsbin or ember-twiddle so others can quickly reproduce the "unwanted behavior". This may also be useful for discussion on the embercommunity.slack.com chat rooms to see if anyone has found a work around.

This does sound like an edge case, only new jQuery v2.2, Ember v2.4 and Firefox (mac & pc?)

[DanChadwick]

I am experiencing this too, but in very limited circumstances. Seems to be FireFox, not Chrome or IE Edge. Happens with ember 2.4.3 but not 2.3.2. Does _not_ happen, at least for me, in a standalone {{input}} helper, but does happen in the {{input}} helper generated in an ember-paper {{paper-input}}. Does _not_ happen if the ember-view class is removed from the <input> element using a debugger.

In some cases the insertion point is missing. In others, it is as described in the report above: fixed, blinking insertion point positioned at text offset 0, but too low.

Unfortunately, there must be some other contributing factors. I took the branch of ember-paper that I'm using (dialogs-jj-abrams) and upgraded ember from 2.3.1 to 2.4.3 and could _not_ reproduce the issue with the dummy app. Bower installed jquery 2.1.4, not 2.2.1 as referenced above.

Let me know what experiments I can try to help narrow this down and I'll perform them. Thanks much.

[DanChadwick]

Ding, ding, ding. Forcing jQuery from 2.1.4 to 2.2.1 reproduces the issue. To reproduce:

1. Install ember-paper as a dummy app.
2. Checkout the 'dialog-jj-abrams' branch.
3. Edit bower.json:

    "ember": "~2.4.3",
    "jquery": "2.2.1",

1. Run bower install
2. Visit http://localhost:4200/#/input with FireFox on Windows. (Not sure about Mac.)
3. Type in an input element and note the insertion point. Try to select characters. The actions work, but the visual feedback is wrong/missing.

[crudo1f]

@pixelhandler here is an ember twiddle example:
https://ember-twiddle.com/50fdee3aee87c09c7fd8

In this case the cursor is not misplaced but it is missing. Just in FF!
If you replace the jquery version by 2.1.4 everything should work fine.

[rwjblue]

So this is likely to be a jQuery bug? Has anyone searched there issue tracker for something like this?

[crudo1f]

I found nothing before I opened this issue. But I was not sure if it is a jQuery issue or an ember issue about jQuery integration. Maybe I have some time to look into this, later.

[DanChadwick]

I don't see anything in the jQuery issue tracker. Version 2.2.x is not even in the list of issues you can search for, and "insertion point" returned nothing related.
https://bugs.jquery.com/query

[locks]

@crudo1f please confirm whether this should be filed in the jQuery tracker instead, and if so close this one. Appreciated!

[code-jongleur]

I have the same problem in my project and have to use jquery 2.1.4 to fix it. Would be great, if this could be filed in the jQuery tracker or the jquery integration checked.

[avdv]

I'm not too sure that it's a JQuery issue.

First, using $.focusin(handler) from JQuery directly works without problems.

Second, returning true from the action handler in Ember, spits out this nasty warning:

ember.debug.js:16628 Uncaught Error: Nothing handled the action 'focusIn'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble.

but the input box behaves / looks as expected.

[locks]

@avdv the error message tries to be very clear, what do you feel is nasty about it? Doing return true; from inside an action handler is how you tell it to bubble up to the parent target, and since you haven't defined one, you get an error.

[avdv]

the error message tries to be very clear, what do you feel is nasty about it?

It's nasty in the sense that it's bad (the warning itself, not the message). Do nasty things and you get nasty warnings. No pun intended.

[pixelhandler]

I'll close this for now, it doesn't seem to be an Ember.js bug.

[c-lehmann]

Got the same issue but I figured out a different workaround by just adding bubbles=true to the input-helper since return true didn't fly in my case.

https://ember-twiddle.com/f37ebd8634908049f45594bdc93cf8a4?openFiles=application.template.hbs

[DanChadwick]

To the extent that Ember recommends a version of jQuery that contains a bug that is incompatible with Ember, I personally think this is an Ember configuration bug. Ember should not accept 2.2.1 if it doesn't work with it, even if it isn't Ember's fault.

[Serabe]

Returning false from a focusin handler _does reproduce_ the problem in Firefox 46.0. It can be seen in this codepen and, in case this bug gets fixed in the future, here is a reproduction:

Firefox does not have support for focusin/focusout at the moment, and the codepen works with jQuery 2.14, so my bet is this is some kind of regression on jQuery. Please, follow jQuery's contribution guides to report bugs.

Thank you!