Выберите окно поиска после переключения внешнего вида в навигационной панели Bootstrap

Question

Я пытаюсь создать навигационную панель с кнопкой переключения div, содержащей форму поиска.Когда пользователи нажимают на кнопку поиска, я бы хотел, чтобы отображался div headerSearch, и выбирался ввод navbarSearch.

Появляется форма поиска, однако ввод не выбран с этим кодом:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<nav class="navbar navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">
     logo
    </a>
    <button class="btn btn-danger" type="button" data-toggle="collapse" data-target="#headerSearch" aria-controls="headerSearch" aria-expanded="false" onclick="selectSearchBox()">
     Search
    </button>
  </div>
</nav>
<div class="collapse navbar-collapse bg-dark py-1" id="headerSearch">
  <div class="container">
    <form method="get" role="search" class="form-inline">
      <input class="input form-control mr-1" id="navbarSearch" type="text" name="query">
      <button class="btn btn-outline-light" type="submit">
        Search
      </button>
    </form>
  </div>
</div>

<script>
  function selectSearchBox() {
    document.getElementById("navbarSearch").select();
  }
</script>

Answer 1

Это не .select(), а .focus().
. И его нужно обернуть в оболочку setTimeout(), которая отправляет код в конец очереди выполнения после запуска Bootstrap кода, отображающегопоисковый контейнер (который связан с кнопкой атрибутом data-toggle):

function selectSearchBox() {
  setTimeout(() => {
    const nS = $('#navbarSearch');
    nS.is(':visible') && nS.focus();
  }, 400)
}

Работает:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<nav class="navbar navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">
     logo
    </a>
    <button class="btn btn-danger" type="button" data-toggle="collapse" data-target="#headerSearch" aria-controls="headerSearch" aria-expanded="false" onclick="selectSearchBox()">
     Search
    </button>
  </div>
</nav>
<div class="collapse navbar-collapse bg-dark" id="headerSearch">
  <div class="container pt-1 pb-3">
    <form method="get" role="search" class="form-inline">
      <input class="input form-control mr-1" id="navbarSearch" type="text" name="query">
      <button class="btn btn-outline-light" type="submit">
        Search
      </button>
    </form>
  </div>
</div>

<script>
    function selectSearchBox() {
      setTimeout(() => {
        const nS = $('#navbarSearch');
        nS.is(':visible') && nS.focus();
      }, 400)
    }
</script>

Примечание 1 : код будет работать даже с setTimeout из 0, но лучше интерфейс для фокусировки ввода в концеанимации, имхо.Он также избегает фокусировки ввода при закрытии складного объекта.

Примечание 2 : перемещение отступа от #headerSearch к его внутреннему .container приведет к тому, что анимация свертывания потеряет небольшой скачок.