Android Browser crash on file input save - javascript

The Android browser crashes in a very simple scenario (I am testing on Galaxy S3, Android 4.1.2):
I have a page with a text input and a file input (you can test it here http://jsbin.com/agugit/1/)
<input type="text" name="test"/>
<br />
<br />
file<input type="file" />
If you focus the text field first, and then hit the 'next' key from the keyboard, the native file picker pops up.
Pick a file, or take a picture, and the next thing that happens is the browser freezing.
If instead you are focusing the file input dirrectly (by tapping, not by using 'next'), everything works just fine.
I have tried different workarounds but none found.
Any help or ideas?

The only solution I have found on Android is to make every file input disabled by default (so that it is skipped from tab order navigation) and listen the 'tap' event, so that when tap occurs, I focus the field programatically, so that the file picker pops up.
After the focus, and a delay of say 500 ms, make the field disabled again.
Any other ideas are still welcomed.

Related

Talkback Input date in Android Chrome Jumps to Top After Selecting Date?

Create a simple <input type="date" /> on a page.
Open your web app on an Android device with a Chrome browser (I'm using P7).
Turn on Talkback.
Open date input.
Select a date, and set.
Watch as the focus is now on the top left home button of the browser. It will say "Chrome Home Button Double-tap To Activate ...".
Anyone else experiencing this?
I wanted to just add setTimeout into onChange callback so that it just focuses back to the input itself, but it won't work if user decided to use keyboard input for the date.

Page refresh on JS alert - can't focus on text input

I've noticed on Chrome and Edge that if I have a javascript confirm (or alert or prompt) message fire, and the user refreshes the page instead of clicking the ok/cancel button, any textfield on the page cannot be edited.
<html>
<body>
<input name="input" value="Can you type here?" />
<script>
console.log("document has focus = "+document.hasFocus())
if(document.hasFocus()==true){
confirm("Refresh this page, do not click cancel or ok");
}
</script>
</body>
</html>
It's as if refreshing on the popup completely blurs Chrome, so the only way to get it back into focus is to click out from the app and back in again. Even constant refreshing by ctrl-R won't put the focus back.
By forcing focus onto the textfield onload, the textfield will have focus but I still can't type into the box, as the browser itself is out of focus.
Has anyone seen this before? A colleague and I couldn't find any mention of this online, apologies if it's been answered.
I'm on Windows 7
Chrome 91.0.4472.77
Edge 90.0.818.46
On my Mac (Chrome 90.0.4430.212) I cannot replicate this.
Cheers
Just posting for the record that I raised this as a bug and it's been merged into an existing bug that I didn't find when searching. As yet no fix on the Chromium side but hopefully will see a fix in future.
https://bugs.chromium.org/p/chromium/issues/detail?id=1085949

Textfield focus on tab key press not working properly in IE for ReactJS app

I am testing my Reactjs app having two textfields (one below the other) on Internet Explorer 10. When I press tab from the first textfield, ideally it should set focus on the next textfield (which is what it is doing in chrome and firefox) but actually I need to press the tab key twice to set focus on the second field.
<TextBox
email
/>
<TextBox
password
/>
Here <TextBox> is the component created by me which internally uses <Input> .
Kindly suggest any possible solutions to fix this.
Thanks in advance.

Website input type text focus only works when browser loses and gets focus

My website uses several input text elements and they are defined in HTML like:
<input type='text' style='width:200px;'/>
However if I open my webpage and I click on these inputs, they look like this:
So they display with no cursor and no blue border when they are selected.
But if I click outside the chrome browser, for example if I click on my desktop and then back to chrome, the inputs work and look like following:
So after this step, they look how they are supposed to.
This only happens in chrome and only on the server, all works fine on localhost.
I have no blur functions or anything else. What causes this issue?
Do anyone have any ideas about this?
Thank you very much!

Cordova Android Text Input Next Focus

I have noticed that in an Android Cordova project anything with <input type="number"> includes a "next" button on the keyboard. This next button allows you to focus on the next input field when pressed. The same is not true for a <input type="text">. In this case there is only a 'go' button and it does not do anything. How can I set focus to the next input field when inside a input text field? Thanks!
I am using Android Kit Kat with Cordova 3.3
UPDATE: I have found that it is possible to make the "next" button appear in Android by setting the android:imeOption inside of <EditText android:imeOptions="actionNext"> </EditText>. Is there a way to set that option in cordova?

Categories