Cordova iOS：点击自定义自动建议无法识别导致键盘关闭

Question

in my Cordova App I have a problem on iOS devices and I have no idea how to solve.

I have a custom auto-suggest which shows up below an input field while typing. All is contained in a dialog box with "position: fixed;". Autocomplete is an unordered list. Click on < li > Element should place the selected text into the input. The problem is, when user clicks on the li, the input loses focus, the keyboard disappears and the whole fixed dialog box "jumps" down and the click event is not recognized. It is recognized when the keyboard already IS closed.

I tried several workarounds, like giving focus back to input field immediately after blur. But it does not help. Keyboard closes and opens instead of just keeping opened.

Any Ideas how to solve?

Here is a video showing the behaviour. It is recorded on the iOS Simulator but same behaviour on real iPhone 6s.

Answer 1

I have found a solution now. As I said the click event is not triggered when the keyboard hides, but a touchstart event is triggered.

So I did a workaround, looking for touchstart event followed by a blur event. If the touchstart-target does not receive a click event within a given time, I will trigger one. This works on my test iPhone 6s.

Here is the code:

var iosTapTarget=null;
if (device.platform === 'iOS') {
  js.eventListener(document.body).add('iosTap', 'touchstart', function (e) {
    iosTapTarget = e.target;

    js.eventListener(iosTapTarget).add('iosTapClick', 'click', function(e) {
      // when the target receives a click, do not trigger another click
      if (iosTapTarget) js.eventListener(iosTapTarget).remove('iosTapClick', 'click');
      iosTapTarget = null;
    });

    // after short time unset the target
    window.setTimeout(function () {
      if (iosTapTarget) js.eventListener(iosTapTarget).remove('iosTapClick', 'click');
      iosTapTarget = null;
    }, 600)
  });

  // on each input fields listen for blur event and trigger click event on element received touchstart before
  var blurableElements = document.querySelectorAll('input[type=text],input[type=email],input[type=password],textarea');
  for (var j = 0; j < blurableElements.length; ++j) {
    js.eventListener(blurableElements[j]).remove('iosBlur', 'blur');
    js.eventListener(blurableElements[j]).add('iosBlur', 'blur', function () {
        window.setTimeout(function() {
          if (iosTapTarget) {
            js.eventListener(iosTapTarget).remove('iosTapClick', 'click');
            js.triggerEvent(iosTapTarget, 'click');
          }
        }, 50);
    });
  }
}

PS: Event handling comes from my own JS "framework" js.js available here: https://github.com/JanST123/js.js But you can use vanilla JS event handling or jQuery event handling too, of course.