<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown class is used to indicate a dropdown menu.</p>
<p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
<p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" >Dropdown Example</button>
<span tabindex=0 class="caret" data-toggle="dropdown"></span>
<ul class="dropdown-menu" role="menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</div>
У меня есть элемент span, и он имеет поиск по фоновому изображению, при нажатии кнопки поиска я открываю меню.Мне не нужна кнопка рядом с кнопкой поиска, поэтому я добавил data-toggle = dropdown в свой диапазон.Раскрывающееся меню открывается, когда я щелкаю мышью, но меню не открывается, когда я фокусируюсь на диапазоне и нажимаю на нем клавишу ввода.
Here it is reproducible
https://jsfiddle.net/rajp1513/z264ykfL/