Input event triggered on Internet Explorer when placeholder changed

[schnepe2]

In IE 11 (and others I think) the input event is fired when the placeholder is used and the displayed data changes. This causes change detection code like

input.addListener("valueChanged", function (e) {
  ...
}, this});

to not work as expected anymore. The issue seems to be at Browser level:
https://connect.microsoft.com/IE/feedback/details/885747/ie-11-fires-the-input-event-when-a-input-field-with-placeholder-is-focused
https://connect.microsoft.com/IE/feedback/details/856700/ie11-ie10-send-input-events-at-times-when-it-is-not-appropriate

Is there a way to work around this issue unit it might be fixed by MS?

[level420]

@schnepe2 could you please create a simple playground example which shows the bug?
Please use the current master playground available at http://qooxdoo.github.io/devel/playground/ for this. Thank you.

[schnepe2]

Try it in IE and a "changeEvent" will immediately occur when you click into the input field (as soon as the placeholder text disappears).
Run it in e.g. Firefox / Chrome / PaleMoon / ... and the event first fires when you really changed something:
http://tinyurl.com/gtvulqq

[schnepe2]

My current (ugly, 'cause it uses the 'internal' method getChecks to get access to protected member) work-around is:

// Prevent IE to use its native CSS placeholder attribute
// (IE placeholder event issue workaround)
if ( qx.core.Environment.get("engine.name") == "mshtml" || qx.core.Environment.get("browser.name") == "edge" )
{
  qx.core.Environment.getChecks()["css.placeholder"] = function () {
    return false;
  };
  qx.core.Environment.invalidateCacheKey("css.placeholder")
}

...placed somewhere at my Application.js.

[johnspackman]

a better way of handling this would be to change the detection code for css.placeholder. The method that would need changing is qx.bom.client.Css.getPlaceholder.

If you can make the fix and submit a PR, we can get it included in the next release?

[schnepe2]

...no I can't, sorry.
I am very very far away from browser-specific/CSS/BOM things (thanks to qooxdoo I never really had to be close to that 👍 ), so I have to ask you guys to really fix it

By the way: I think you should not change the "css.placeholder" detection, it is correct (IE has this feature/attribute).
What is wrong is that IE emits events that it shouldn't.
I would more think of a "has.problems.with.placeholder" kind of detection logic 😉, but it's up to you

[level420]

From a short test http://tinyurl.com/zh8bvyt it seems that when the input field gets the first focus and the placeholder disappears, the value of the input field changes from null to an empty string. We could maybe prevent this by initializing the value of the input tag to an empty string?

[level420]

According to this post https://connect.microsoft.com/IE/feedback/details/856700/ie11-ie10-send-input-events-at-times-when-it-is-not-appropriate microsoft will never fix this in IE11 as Edge is the new browser. There will only be security fixes for IE11 for the future.

[schnepe2]

We could maybe prevent this by initializing the value of the input tag to an empty string?

I'll be happy to try in my applications code to check if it's enough.
In my application setting and removing of the value is common (not 100% recreated in the playground example). I could test if a proposed fix works when appearing and disappearing of the placeholder is done.
Can you provide a hint where to put what?

[hkollmann]

var input = new qx.ui.form.TextField().set({
width: 200, placeholder: "placeholder text", liveUpdate: true
});
var info = new qx.ui.form.TextArea().set({
width: 200, height: 400, readOnly: true
});

input.addListener("changeValue", function (e) {
var value = e.getData();
var old = e.getOldData();
if(value === null) {
value = '---null---';
}
if(value === undefined) {
value = '---undefined---';
}
if(value === '') {
value = '---empty string---';
}
info.setValue( (info.getValue()||"") + "changedValue:|" + old + "|" + value + "|\n" );
}, this);

var doc = this.getRoot();
doc.add(input, {top: 5, left: 5});
doc.add(info, {top: 35, left: 5});

[hkollmann]

Only IE11 Problem

[hkollmann]

Done with #9895