How to prevent Bootstrap 4 dropdown to show on input element click?

Question

Following is a simple bootstrap dropdown menu, with the exception that the toggle element is a text input. I don't want the dropdown menu to show on click event, rather, I want to show it on user input, so that I can dynamically populate the menu based on that input.

The click event handler below prevents the dropdown from showing before the user has input anything in the input element, and when there is any input, the input handler shows the dropdown menu. However once the user has input something into the element, and dropdown has shown. Afterwards, the any subsequent click on the input element shows the dropdown menu, and the click handler runs but does not prevent the dropdown from showing even if the user clears all input.

Does Bootstrap attach any new events, or am I not understanding events very well? How could I make this work?

$('#exampleFormControlInput1').on('click', e=>{
  e.preventDefault();
  e.stopPropagation();
  console.log('Dropdown prevented');
});

$('#exampleFormControlInput1').on('input', e=>{
  $('#exampleFormControlInput1').dropdown('show');
});






  
    Input with autocomplete
    
    
      Action
      Another action
      Something else here

user_6263942 · Answer

You don't need to add new click handlers. Use Bootstrap's events and methods instead: https://getbootstrap.com/docs/4.6/components/dropdowns/#methods

To prevent the dropdown from opening when the input field is empty, block the show.bs.dropdown event. Note that:

All dropdown events are fired at the .dropdown-menu’s parent element and have a relatedTarget property, whose value is the toggling anchor element.

To show the list when data appears in the field, and hide when the field becomes empty, you can use the .dropdown() method.

https://codepen.io/glebkema/pen/RwZMNzE?editors=1011

$(function() {

  // prevent the list from opening by clicking on an empty field
  $(".dropdown").on("show.bs.dropdown", function(e) {
    if (!e.relatedTarget.value) {
      return false;
    }
  });

  // handle changes in the input field
  $("#exampleFormControlInput1").on("input", function(e) {
    if (this.value) {
      $(this).dropdown("show");
    } else {
      $(this).dropdown("hide");
    }
  });
});


  
    Input with autocomplete
    
    
      Action
      Another action
      Something else here

How to prevent Bootstrap 4 dropdown to show on input element click?

1 Answers