Android Chrome click after keyboard entry not working

user_2298708 0
Viewed 815

It's hard to capture this problem in a short title, but replicating the issue is dead simple:

Code example

<input type="text" style="width: 100%; border: 1px solid #ccc; padding: 10px;"/>
<pre>
  Android Chrome:
  - Click the input field to open virtual keyboard
  - Type a character using said keybaord
  - Scroll down
  - Click the button
  
  Click is not registered :(
  Button is selected, keyboard just closes
  
  
  
  
  
  
  
</pre>
<button href="#" onclick="alert('clicked');" style="display: block; text-align: center; width: 100%; background-color: #ccc; color: #fff; padding: 10px;">click</button>

Try it on Codepen: https://codepen.io/klaasvanderweij/pen/VwjYQvo

Description

So click an input field to trigger Android to show the onscreen keyboard. Then you enter a character, any character, this is (albeit strangely) mandatory.

Now keep the keyboard open/visible and scroll (down) to an area of the screen that was not in the visible area when you were entering a character on the input field. Click on anything clickable (<button>, <a>, <div onclick="...">, etc.).

Expected behaviour:

A click is registered.

Actual behaviour:

No click is registered.

I am working on an autocomplete/type-ahead/search drop-down thingy, in which the elementes to be clicked are added dynamically. So at first I thought that the nature of this problem was in the dynamically added content or position: absolute; elements, but this example shows that it's way more simple than my applied scenario.

What I've tried:

  • Using <button>, <a>, <div onclick="...">
  • Registering an event listener on document to figure out the target of said click. The target turns out to be an underlying element that is present in the visible area during keyboard entry (e.g.: <body>)

Help

This scenario is so simple (and probably common) that tons of people should run into this problem. However, I can't find a solution or workaround.

I'd like to be able to register the first click that is outside the visible area during keyboard entry, such as the click on the button in this example. Is there a way to make sure the first click after entry get's picked up, with JavaScript or CSS or anything?

google-chrome android html javascript
2 Answers

The issue appears to reside in the focus of the input element. Blurring the element fixes the behaviour of the unregistered click.

Adding the following JavaScript (in this example) will fix the issue:

document.querySelector('input').addEventListener('input', (e) => {
    e.target.blur();
    e.target.focus();
});

The click performed directly after entering text into the input element, has a target that was visible in the viewport during entry. Scrolling down to and clicking an element that wasn't visible during entry, will yield an event.target such as <body> -- the first element at the click coordinates that was visible during entry. Hence I suspect that this issue is some artifact of optimization (disregarding off-screen elements during input).

user_22987080

My take on that:

Since I found out that the focus event on the "clickable" element is indeed fired, I manually trigger a click from there.

Of course with side effects like invoking a click on the button even though you may e.g. tab there. In my case that was the best compromise.

user_67796330
Related