Safari（移动版）IOS-在外部单击时输入不会失去焦点

Question

I'm doing a search bar that gives results (similar to an autocomplete) but on iOS' Safari it doesn't loses focus when tapping outside of the input tag when the keyboard is open.

I did a simple jsfiddle to demonstrate the minimal code that reproduces this issue:

https://jsfiddle.net/coppolaemilio/0bqrLcwe/4/

HTML

<input class="selector" type="text">
<ul>
  <li>element</li>
</ul>

JS (jQuery)

$('.selector').focus(function() {
    $('ul').addClass('visible');
});
$('.selector').focusout(function() {
    $('ul').removeClass('visible');
});

CSS

.selector{
  margin: 20px;
}
ul {
  display: none;
}
ul.visible {
  display: block;
}

Answer 1

I managed to find a solution by using this:

$(document).on('touchstart', function (event) {
  if (!$(event.target).closest('.country-selector').length) {
    if ($('.country-selector').is(":visible")) {
      $('input.country-selector').blur();
    }
  }
});

https://jsfiddle.net/coppolaemilio/0bqrLcwe/5/