Triggering a Bootstrap 5 dropdown through code is only effective within the browser's developer console, rather than standard JavaScript implementation

I attempted to display a Bootstrap5 dropdown by clicking on a link in my web application. Despite trying various methods, such as dispatching events and utilizing the bootstrap Dropdown classes, I was unable to achieve success. Interestingly, both approaches function correctly when executed in the developer's console of Firefox and Chromium.

To eliminate any potential interference with the code, I removed all components except for Bootstrap and created a micro website:

<html>

<head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5d7dadac1c6c1c7d4c5f5809b849b86">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8be9e4e4fff8fff9eafbcbbea5baa5b8">[email protected]</a>/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>

Despite my efforts, the dropdown fails to open. However, executing

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

in the developer's console successfully opens the dropdown menu.

javascriptbootstrap-5

Answer №1

By clicking the button, you are initiating a sequence of events where the focus shifts to the button, allowing JavaScript to run and trigger the drop-down to open before returning the focus back to the button.

The drop-down menu is programmed to close when it loses focus, so as soon as the focus returns to the button, it promptly closes again (sometimes so quickly that it seems like it never opened at all).

To modify this behavior, consider utilizing the autoClose option.

Answer №2

Shoutout to @Quentin for the tip about autoclose options. It's puzzling why the click event functions in the console but not on the site script.

Nonetheless, I devised a workaround with this clever tactic:

<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b6964647f787f796a7b4b3e253a");">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="35575a5a41464147544575001b041b06">[email protected]</a>/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 nifty trick allows you to click another element to open the dropdown while maintaining its original behavior.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhancing a variable's value while simultaneously boosting its rate of increase through Javascript

Looking to adjust the timing on a number increase function using setInterval(Function, time). Initially set the variable for time as time = 1000, but now looking to dynamically change it by implementing a function triggered by a button click: function cha ...

javascripthtmltimesettimeoutsetinterval

Efficient Local Database with Javascript

When storing a substantial amount of data, such as a big hashmap in JavaScript, what would be the optimal format for quick retrieval while also supporting Unicode? Would XML or JSON be better suited for this purpose? ...

javascriptjsonunicode

Tips on leveraging state values within the makeStyles function in Material UI React

I'm in the process of building a Webpage and incorporating Material UI for the Components. Here's the code: import { makeStyles, Typography } from "@material-ui/core"; const useStyles = makeStyles((theme) => ({ container: { ...

javascripthtmlreactjsreact-nativematerial-ui

Error: The configuration object is invalid, and I am unable to deploy my server to test the bundled code

After running the webpack --mode production command to build the dist folder, I encountered an error when trying to run the server as the app is still running in developer mode. The error message displayed was: C:\Users\Bymet\Documents&bs ...

javascriptnode.jsreactjswebpack

What is the process for including a new item in an array of objects?

const data = [ { title: 'Tasks', items: ['complete assignments', 'study for exams'], }, { title: 'Ongoing', items: ['learn new skills', 'work on projects'], }, { titl ...

javascriptarraysreactjsobject

After sending the directories, an unusual issue arose that caught me off guard

Here is the code I have written:- const express = require("express"); const app = express(); app.get("/", function (req,res) { res.send("<h1>Hello World</h1>"); res.send(__dirname + '\\index. ...

javascriptnode.jsexpress

Retrieve the currently displayed page on a bootstrap table

I'm currently utilizing the bootstrap table to showcase my data. One of the features I have added is a column with an edit button for each row. Upon clicking on the edit button, I open a bootstrap modal that displays the data from the corresponding ro ...

javascriptjquerytwitter-bootstrap-3

AngularJS fetches the 'compiled HTML'

If I have this angularjs DOM structure <div ng-init="isRed = true" ng-class="{'red': isRed == true, 'black': isRed == false}"> ... content </div> How can I obtain the 'compiled' version of this on a cl ...

javascripthtmlcssangularjs

Proper usage of a method within another method in a Vue component

Currently, I am extracting GPS data from an image using exifjs. My objective is to convert the latitude and longitude variables into a decimal variable as illustrated below: <template lang="html"> <div class="upload-wrap"> <button cla ...

javascriptvue.jsvuejs2

Please be advised that the message is currently in the process of being typed

In my current setup, I am utilizing Laravel 5.6.7, Socket.IO, and vue.js while excluding Pusher and Redis. The following is the code snippet I am using to send messages directly to a user engaged in one-on-one chatting with me. var url = "http://localhost ...

javascriptlaravelvue.jslaravel-5.6

Adding a line and text as a label to a rectangle in D3: A step-by-step guide

My current bar graph displays values for A, B, and C that fluctuate slightly in the data but follow a consistent trend, all being out of 100. https://i.stack.imgur.com/V8AWQ.png I'm facing issues adding lines with text to the center of each graph. A ...

javascriptcssd3.js

Having difficulty altering the div color in real-time using VueJS

I'm currently in the process of building an application with Bootstrap and VueJS. My goal is to create a folder structure similar to Google Drive, where I want to make a div stand out in blue once it's selected. Below is the code snippet: ex ...

javascriptjqueryhtmlcssvue.js

Exploring CakePHP 3's capabilities with JSON response: Enhancing response data format by connecting with related tables

I am working with two tables, each with their own set of attributes: Sessions id staff_id Staff id firstname lastname When a link is clicked, it triggers a JavaScript function to open a modal. An AJAX call is then made to retrieve data in JSO ...

javascriptjsonajaxcakephpcakephp-3.0

Vue error: Uncaught promise rejection - RangeError: The computed value update has exceeded the maximum call stack size

My computed code snippet: computed: { display: { get() { return this.display }, set(newValue) { this.display = newValue } } }, Attempting to update the computed value from a function in ...

javascriptvue.js

Error occurred while attempting to execute the method

Here's a MongoDB Mongoose query we're dealing with: sampleSchema.find({ $where: "expired <= " + (new Date()) }) .limit(9) // Problems may arise from here .sort({ postedDate: -1 }) .then((docs) => { console.log(&apos ...

javascriptjsonnode.jsmongodbmongoose

What is the best way to utilize variables in order to style this image inside a selector?

Struggling with adding dynamic styling to an image inserted into a div through a selector. Despite successful testing of the style changes, I am stuck on how to assign variable values for the properties. Various syntax attempts have failed so far. functi ...

javascriptjqueryhtml

Firestore is failing to accept incoming data when the setDoc method is employed

I am encountering an issue with my app's connectivity to the Firestore database when attempting to utilize setDoc. The database is successfully operational for next-auth, creating records as intended. However, the problem arises when trying to enable ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

Node.js CallbackHandler: Simplifying event handling in JavaScript applications

I implemented the following function in a .js file to handle an asynchronous network connection: function requestWatsonDiscovery(queryString) { console.log('Query =', queryString); if (typeof queryString !== 'undefined') { ...

javascriptnode.jscallbackpromise

Using AJAX and FormData to Attach a List upon Submission

I am currently working on connecting a list of "Product Specifications" to my "Add Product" dialog, and I'm using AJAX to submit the form. Since users are able to upload a product image within this form, I am sending the AJAX request with a 'For ...

javascriptc#jqueryajaxasp.net-core

The property 'body' cannot be read because it is undefined

I have been attempting to incorporate passport logic into my controllers file, but I encountered an issue. When I place the logic inside the controllers, it gives me an error message saying "Cannot read property 'body' of undefined." However, whe ...

javascriptnode.jsexpress