Why doesn't the focus() method fire on input in the safari browser?

Question

JavaScript

Hello!

I ran into a problem: it was necessary to implement that - when clicking on a certain button in mobile screen resolution - scroll to the search form and - after the scroll is completed - focus on the desired input. Here is a link to the page itself - click

I draw your attention to the fact that the button you need to click on appears when you scroll down

the
page

- a couple of lines of jquery and - done! It turned out that this code works fine on all browsers, except for safari (in this case, we tested it on iPhones).

Here is the markup

<!--кнопка для срабатывания скрипта-->
<div class="search_fix"></div>

...

<!--форма с полем input-->
<form action="rezultatyi-poiska.html" method="get" class="header__search msearch2">
    <input id="change_search_input" type="text" class="header__input ui-autocomplete-input" name="query" value="" placeholder="Что ищем?" autocomplete="off">
    <div class="input-group-append">
        <button type="submit" class="header__btn"></button>
    </div>
    <div id="change_search"></div>
    <div id="change_search_close"></div>
</form>

Here is jquery - simplified, threw out lines not related to the problem

var windowWidth = window.innerWidth;
    if (windowWidth > 991) {
        $('.header .search_fix').on ('click', function(){         
            $('#change_search_input').focus();                      
            return false;
        });
    } else {
        $('.search_fix').on('click', function(event){
            console.log(event.type);
            $("html, body").animate({ scrollTop: 0}, 1000, function() {               
                    $('#change_search_input').focus();          
            });            
        });
    }

I could not google the solution to the problem, perhaps there is not enough knowledge.

Suddenly who faced - direct please, I will be very grateful.

Answer 1

It's the onmouseup event that makes the selection unselected, so you just need to add:

$('#change_search_input').mouseup(function(e){
  e.preventDefault();
});