Updating `enterKeyHint` resets the input value on Chrome Android - javascript

I'm updating the value of enterKeyHint dynamically in an autocomplete library. When there's a active item, the Enter key should use "go" (to hint that hitting Enter navigates to the item's link) and when there isn't (no query, no results), the Enter key should use "search".
This DOM updates works fine on most mobile browsers, except on Chrome Android. When the update happens, the input value is cleared.
I've reproduced the issue in isolation. The update kicks in at 5 characters.
Here are quick previews on a Galaxy S9:
With Firefox Android, the Enter key's label updates as expected and the input value doesn't change.
With Chrome Android, the Enter key updates but the input value is reset (causing new updates to the Enter key, etc.)
I'm suspecting an inconsistency between how mobile browsers implement the spec, since everything works as expected on Safari iOS, Chrome iOS and Firefox Android. However, I couldn't find anything online, it doesn't seem like this behavior has been reported before (I assume updating this propery isn't too commonplace).
Has anyone ever faced this issue, or understands it? Thanks in advance!

Related

Keyboard disappears on focus in Mobile Browsers (iOS + Android)

Please help me find and fix this bug https://www.screencast.com/t/mzpKCY4OXH
On the video iPhone X with iOs 11.4.1
This is Shopify Store. Bug hide keyboard for all input on site: in checkouts, in the subscription form. And client says me what bug repeats also on Galaxy S9 in Chrome.
It looks like textfield lost their firstResponder.
Not sure but
When you focus on a specific texfield
Set the textField as firstResponder.
Check this two.
textFieldShouldBeginEditing
textFieldDidBeginEditing

On any iOS Mobile Devices: Inputs within iFrames have issues determining when input is out of focus - Material Design -Recurly

Situation:
Material Design Floating Labels are stuck with a class="in-focused" even when the input is out of focus. The inputs also contain an iFrame generated from Recurly if that helps.
This seems to happen on (Chrome and Safari) browsers for any iOS Mobile device (iPads iPhones any version). Also, the inputs are all iFrames. Sometimes the cursor will disappear (version 9 and below) when you try to tap back into an empty input field as an additional error. The iFrames are generated from Recurly.
I believe there is an issue with Mobile Safari devices where it doesn't recognize a possible Blur event.
Question:
My goal is to remove the class="is-focused" from any element that is not in focus. What would you you recommend as a solution for this problem?
If you would like to reproduce the error you can see if you go to this url: https://pantaya.com/billing/payment (sign up a dummy account if you need to...) You will see the form that gives these errors.
All advice is helpful! Thank you!
Picture attached to see error:

Samsung Internet default browser javascript autocomplete issue

I have an issue that only seems to happen in Samsung Internet default browser.
I am using the following where #query-mob is the id of a text input used for searching.
var places = ["Place1", "Place2", "Place3", "AndSoOn"]
$("#query-mob").autocomplete({
source: places
});
Selecting any of the values from the autocomplete then hitting 'search' should perform a search on the values chosen. This is working perfectly on all browsers I've tried, mobile and desktop, except samsung default browser.
To add, manually typing "Place1" instead of selecting from the autocomplete works fine, but selecting from the autocomplete will perform a blank search. i.e. it seems the chosen value is not being passed through correctly into the text field.
Any ideas? Also, is there a way I can debug this on the device? Finding it hard to see what's failing.
Thanks in advance

Android browsers keyboard opens/closes on last input field focus

I'm getting some odd behaviour in the Chrome browser on HTC One and Galaxy S5.
I click on an input field to enter some data and the keyboard opens and immediately closes again.
I've noticed it only happens on the last available input field on my pages.
Has anyone encountered this issue before?
It works fine on the iPhone and desktop browsers.
Thanks
Ok...so it looks like it has something to do with android browsers redrawing the DOM whenever the keyboard appears. I have $(window).resize() function that is getting called each time the keyboard appears in this case. I may just switch it to use $(window).load().

How to detect "enter-key press in input clicks next button" behavior using JavaScript in IE 8-10

I am trying to "feature detect" IE's behavior when pressing enter in an input box that has a button element next to it (when they are not in a form element).
I'm saying IE's behavior because no one else fires a click event on the next button when pressing the enter-key while the input is focused.
Related question where the first awnser describes why IE behaves like this:
IE bug triggers click for 2 buttons?
JS-Fiddle where I try to simulate the key press via jQuery.Event and .trigger:
http://jsfiddle.net/DbVrn/
Behavior of said js-fiddle in IE:
When opening the page, the input gets focus, and then we try to simulate pressing of the enter-key.
The simulated enter-key does nothing, hence the input remains focused and red.
If you manually press enter while the input is focused, the button will become focused and green.
The problem i have with my current attempt to detect this feature is that:
$("input").trigger(jQuery.Event("keypress", { which: 13 }));
does not actually do the same as manually pressing the enter-key while the input is focused.
How can I successfully simulate the enter-key so that my test for this behavior is possible?
Or is there another way i can test for this behavior?
Edit: Updated title to more clearly state that this needs to be tested via javascript, and that the test needs to work in IE from version 8 to 10. Unless anyone else can provide a way of testing this, I will conclude that I need to use user-agent sniffing to see if browser is IE and choose code-path based off that.
Neither by using jQuery's trigger method nor by using the native methods it is possible to simulate key presses in the way that you would like to. The real and simulated key presses can both be captured, but the simulated key presses do not trigger the entire chain of event handlers that are caused by a real key press. This is easily demonstrated by putting this line above your trigger
$("input").keypress(function(event) { alert(event.which); });
As you can see the capture works fine, for both simulated and real key presses, while the difference between the handling of those two key presses obviously remains.
It also does not matter what you do with your keypress event objects. You may add a keyCode, which the real keypresses in IE have, but this will not change this. It seems nothing will. Unfortunately I cannot find any documentation explaining why, though this problem has been around for a while
http://forums.asp.net/t/1478871.aspx/1
So there seems to be no way from within the browser. You would have to do it from without. You could use something like InternetExplorerDriver for that.
Instead of feature detecting I would recommend simply recording which user agents have this 'feature'. Since Microsoft is usually pretty bend on backwardscompatibility it is unlikely they will change the behavior of an enter keypress on an input field in future version.
http://code.google.com/p/selenium/wiki/InternetExplorerDriver
Simulating key presses that change input/textarea fields
Using the TextEvent method it is possible in some browsers (e.g. chrome) to send text, including new line, to an input or textarea field, but this will not work in any version of IE up to version 10 as demonstrated by this fiddle:
http://jsfiddle.net/qz7kV/1/
It seems there is no way to test for this behavior via JavaScript.
I have tested IE 8, 9 and 10 and confirmed they all behave this way.
So for now, i am going to combine some ideas from
Javascript IE detection, why not use simple conditional comments? and
http://tanalin.com/en/articles/ie-version-js/ to create a test for IE that will work reliably as long as IE does not remove support for conditional compilation comments.
var ie = (/*#cc_on!#*/false && (function(){
var div = document.createElement("div"),
list = div.getElementsByTagName("br"),
version = 3;
do {
div.innerHTML = "<!--[if gt IE " + (++version) + "]><br><![endif]-->";
} while(list[0]);
return (version > 4 ? version : 10);
}()));
The ie variable will be the browser version in Internet Explorer, and will be false in other browsers.
I don't see a reliably way to trigger the bug from JavaScript alone. You have several other options:
Install IE in a VM and use a UI robot to drive the test. That takes a lot of effort but will reliably trigger the bug.
There are companies which offer remote testing; they use SSH tunnels to access a server on your side and can test your site against many different versions of IE. This is pretty easy to set up technically but might be hard to get because of company policies, FUD and politics. Google for "test web site with many different browsers"
Test it once manually and when it works, write a test case which just checks that the code is there (i.e. a test that fails when the JavaScript file or page source doesn't contain a certain fixed string). Pro: Very easy to set up, Con: Breaks easily
Just test it once and then rely on inertia (i.e. that no one else will touch that code for years).

Categories