Question 220839 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Opening a bootstrap5 dropdown programmatically only works in the browser's dev console, not in vanilla JS code

I tried to open a Bootstrap5 dropdown when clicking a link in my web app. I tried dispatching events and using the bootstrap Dropdown classes, both without success. The code of both approaches works, when I run it in the developers console (Firefox & Chromium).

I stripped everything but bootstrap and wrote this micro website to make sure nothing else interferes with the code:

<html>

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <script>
    function test() {
      document.getElementById("dropdownMenuButton1").click();
    }
  </script>
</head>

<body>
  <!-- This is the dropdown example from the official bootstrap5 docs -->
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <!-- Now the button, that should trigger a click on the dropdown -->
  <button class="btn btn-primary" onclick="test()">Open Dropdown</button>
</body>

</html>

It’s not working, but when I run

document.getElementById("dropdownMenuButton1").click();

in the dev console, the dropdown opens.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks @Quentin for the hint with the autoclose options. I still don't understand why the click event works in the developers console, but not in the script on the website.

    However I managed to solve the problem with this hacky approach:

    <html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script>
function test(){
  const elm = document.getElementById("dropdownMenuButton1");
  //  this disables the auto closing
  elm.setAttribute("data-bs-auto-close", "false");
  //  now open the dropdown
  new bootstrap.Dropdown(elm).show();
  //  restore the original state
  elm.removeAttribute("data-bs-auto-close");
  //  recreate the dropdown to apply the original state.
  //  without the timeout it does not work (it's not opening).
  setTimeout(() => {
    new bootstrap.Dropdown(elm);
  }, 10);
}
</script>
</head>
<body>
<!-- This is the dropdown example from the official bootstrap5 docs -->
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>
<!-- Now the button, that should trigger a click on the dropdown -->
<button class="btn btn-primary" onclick="test()">Open Dropdown</button>
</body>
</html>

    This makes it possible to open the dropdown by clicking another element and keep the original behavior of the dropdown menu.


  2. 0

    Clicking the button moves the focus to the button, so the JavaScript runs, triggers the drop down to open, then the focus moves to the button.

    The drop down menu is designed to close when it loses the focus, so when the focus moves to the button, it closes again (and this happens so quickly that it doesn’t appear to open in the first place).

    You can use the autoClose option to change that behaviour.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search