Как использовать поле ввода в качестве переключателя для выпадающего меню начальной загрузки 4

Question

Мой вопрос - это вариант этого другого вопроса

Вместо кнопки я хочу использовать поле ввода для переключения раскрывающегося списка.Проблема в том, что без лишнего кода раскрывающийся список не открывается при вкладке во ввод.Это может быть зафиксировано событием focusin.

Я нашел рабочее решение (показано ниже), но оно немного странное в том, что оно открывает-закрывает-открывает раскрывающийся список при нажатии, хотя я не вижувидимое мигание.

Теперь, нажатие на элемент управления редактирования сначала вызывает событие focusin, а затем событие click.Как и в другом вопросе, я попытался остановить загрузчик, открыв выпадающий список при нажатии, вызвав e.stopPropagation(), e.preventDefault() и вернув false из обработчика событий;ничего не работаетВ результате выпадающий список быстро мигает и сразу исчезает.Как видно из текста #msg, щелчок вызывает сначала фокус, а затем событие щелчка.

Есть предложения?

Одна идея состояла в том, чтобы инициировать щелчок во время события focusin, но теперь это означает, что при физическом щелчке событие щелчка запускается дважды, и выпадающий список мигает.Я также не уверен, какие еще могут быть отрицательные побочные эффекты.

HTML (упрощено для ясности):

<div class="ml-4">
  <input type="text" class="form-control" id="Medium" name="Medium" placeholder="Medium" value="">
</div>
<div class="ml-4 dropdown">
  <input type="text" class="form-control" id="Material" name="Material" placeholder="Material" value="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  <div class="dropdown-menu" aria-labelledby="Material">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>
<div class="ml-4">
 <div style="height:200px;"></div>
 <input type="text" class="form-control" id="Dummy" name="Dummy" placeholder="Dummy" value="">
 <p id="msg">S</p>
</div>

JS работает (код, связанный с #msg, предназначен для отладки):

$("#Material").focusin(function(e) {
 $("#msg").text($("#msg").text() + '-i');
 $(this).dropdown('toggle');
});
$("#Material").click(function(e) {
 $("#msg").text($("#msg").text() + '-c');
 // when removing the following line, neither e.stopPropagation(), e.preventDefault(), nor returning false helps
 $(this).dropdown('toggle');
});
$("#Material").focusout(function(e) {
 $("#msg").text($("#msg").text() + '-o');
});

Answer 1

Возможно, я нашел решение: обернуть input в div, вызвать раскрывающийся список на родительском элементе input и предотвратить распространение события click.

HTML:

<input type="text" class="form-control" id="Material" name="Material" placeholder="Material" value="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

становится

<div data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   <input type="text" class="form-control" id="Material" name="Material" placeholder="Material" value="">
</div>

JS: (только измененные детали)

$("#Material").focusin(function(e) {
 $("#msg").text($("#msg").text() + '-i');
 $(this).parent().dropdown('toggle');
});
$("#Material").click(function(e) {
 e.stopPropagation();
 $("#msg").text($("#msg").text() + '-c');
});

Это решение работает нормально.