Automatically collapse the Bootstrap4 Dropdown Menu upon clicking the select element

After tackling my previous issue on Stack Overflow, I stumbled upon a new question that has been bothering me.

The problem arises when users click on the arrow to reveal advanced search options, as the form drops down as expected. However, when a user clicks on a select dropdown menu, the entire menu collapses unexpectedly.

I have been attempting to identify the element or trigger causing this problem and find a workaround, but so far, I have made no progress.

Here are my observations:

  1. [Expected] Clicking outside the dropdown area should collapse the menu
  2. [Unexpected] Clicking on any white space inside the dropdown still collapses the menu
  3. [Expected] Users should be able to type in and enter required text when clicking on the text field, checkbox, radiobox, or textarea
  4. [Unexpected] Clicking on a select menu instantly collapses the dropdown

Below is a sample code to illustrate the issue I am facing.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="input-group dropdown">
            <input type="text" class="form-control" id="project_search" placeholder="search ...">
            <div class="input-group-append">
              <div class="btn-group">
                <button class="btn bg-primary text-white" type="button">Search</button>
                <button class="btn bg-primary text-white dropdown-toggle dropdown-toggle-split" id="searchAdvancedFilter" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false">
                  <span class="caret"></span>
                  <span class="sr-only">Toggle Dropdown</span>
                </button>
                <div class="dropdown-menu dropdown-menu-right p-3 w-100" aria-labelledby="searchAdvancedFilter">
                  <h6 class="dropdown-header">Advanced Settings</h6>
                  <div class="dropdown-divider"></div>
                  <div class="form-group">
                    <label for="option">Option Header</label>
                    <select class="form-control" id="option" name="option">
                      <option>Pick an option</option>
                      <option value=1>Option 1</option>
                      <option value=2>Option 2</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="inputtext">Input Header</label>
                    <input type="text" class="form-control" id="inputtext" name="inputtext">
                  </div>
                  <div class="form-group">
                    <label for="inputcb">Checkbox Header</label>
                    <input type="checkbox" class="form-control" id="inputcb" name="inputcb">
                  </div>
                  <div class="form-group">
                    <label for="inputradio">Radio Header</label>
                    <input type="radio" class="form-control" id="inputradio" name="inputradio">
                  </div>
                  <div class="form-group">
                    <label for="ta">TextArea Header</label>
                    <textarea class="form-control" id="ta" name="ta"></textarea>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

javascriptdrop-down-menubootstrap-4dropdownpopper.js

Answer №1

Prevent Bootstrap Dropdown menus from closing on click, except when using a <form>. To achieve this, simply insert a <form> element inside the dropdown...

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container">
<div class="row">
    <div class="col-12">
        <div class="input-group dropdown">
            <input type="text" class="form-control" id="project_search" placeholder="search ...">
            <div class="input-group-append">
                <div class="btn-group">
                    <button class="btn bg-primary text-white" type="button">Search</button>
                    <button class="btn bg-primary text-white dropdown-toggle dropdown-toggle-split" id="searchAdvancedFilter" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <div class="dropdown-menu dropdown-menu-right p-3 w-100" aria-labelledby="searchAdvancedFilter">
                        <h6 class="dropdown-header">Advanced Settings</h6>
                        <div class="dropdown-divider"></div>
                        <form>
                        <div class="form-group">
                            <label for="option">Option Header</label>
                            <select class="form-control" id="option" name="option">
                                <option>Pick an option</option>
                                <option value="1">Option 1</option>
                                <option value="2">Option 2</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="inputtext">Input Header</label>
                            <input type="text" class="form-control" id="inputtext" name="inputtext">
                        </div>
                        <div class="form-group">
                            <label for="inputcb">Checkbox Header</label>
                            <input type="checkbox" class="form-control" id="inputcb" name="inputcb">
                        </div>
                        <div class="form-group">
                            <label for="inputradio">Radio Header</label>
                            <input type="radio" class="form-control" id="inputradio" name="inputradio">
                        </div>
                        <div class="form-group">
                            <label for="ta">TextArea Header</label>
                            <textarea class="form-control" id="ta" name="ta"></textarea>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

Alternatively, you can utilize the jQuery stopPropagation() method: 

$('.dropdown-menu').click(function(e) {
    e.stopPropagation();
});

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

Using JavaScript to search JSON objects based on key value pairs

Consider a scenario where you have an array of objects in users.json: {"key":"userSubscriptions","value": [{"channel":"Netflix","user":"Bobby","region":"NA"}, [{" ...

javascriptarraysjsonfilter

Loading Webfonts Asynchronously in NextJS Using Webfontloader

I am currently working on a NextJS app where I am using webfontloader to load fonts dynamically. function load() { const WebFont = require("webfontloader"); WebFont.load({ google: { families: fonts } }); } However, I ha ...

javascriptnext.jswebfont-loader

Setting a fixed data value within a div for subsequent retrieval through a function

I found a helpful example that demonstrates how to convert numbers into words. You can check it out here. The function for converting numbers into words is implemented in the following HTML code: <input type="text" name="number" placeholder="Number OR ...

javascriptjqueryhtml

Error message: The property '__isVuelidateAsyncVm' cannot be read because it is undefined

I'm encountering an issue with the code I have in this codesandbox link. The code features a form with validation and a disabled "Calculate" button that should only become enabled when all fields are valid. However, I'm receiving the error messag ...

javascriptvue.jsvuetify.jsvuelidate

Check to see if the user has been redirected to the page using JavaScript

When a file input validation fails in a Laravel project, the user is redirected back to the current page. However, the issue arises when the user has to scroll down to see the error message and understand what went wrong. This doesn't provide the bes ...

javascriptlaravelhttp-redirect

Choose an option from the drop-down menu and transfer the selected value to the following page using a hidden

Struggling to capture the selected value from a combo box and set it to a hidden field in order to retrieve it on the next page. Need some assistance with this task. Here is my form tag: <form class="well" name="ddm" id="ddm" style="margin-left: 30px; ...

javascriptjqueryhtml

Showcasing the selected menu item's value on an Angular button

I've encountered an issue where I have a list of menu items: <md-menu-item ng-value="menuItem.value" ng-repeat="menuItem in filtermenu.menuItems" ng-click="activeFilterCtrl.selectedfilter(menuItem)" translate> <md-button> {{ m ...

javascriptangularjs

Showing the computation outcome on the identical page

I have implemented a table within my PHP code. In the second column of this table, it typically displays "---". However, once I click the submit button, the same page should now display the calculated result. Here is an example: <table> <tr>& ...

phpjavascriptcssajaxcalculator

Locate relevant information within the arrays through the process of filtering

For my collection, I am looking to match the operator_name based on date and then further narrow it down by matching shift_name within an array { "_id": "5eb301bc0218ff48b724a486", "date": "2020-07-02T00:00:00.000Z", "shift_wise": [{ "_id": ...

javascriptnode.jsmongodbexpressmongoose

The Next.js website displays a favicon in Chrome, but it does not appear in Brave browser

As I work on my debut next.js website, I am configuring the favicon in index.js like this: <Head> <title>Create Next App</title> <link rel="icon" href="/favicon.ico" /> </Head> Initially, all my source ...

javascriptreactjstypescriptnext.js

Enhancing specific child value in Firebase Database using JavaScript: Exploring Firebase Realtime capabilities

I have a database structure where I need to update the value of isseen to true when the sender is equal to "5". Here's an example of my database structure: Chats -LvuhnORi1ugp8U2Ajdq isseen: "false" message: "hi" receiver: "OX0pReHXfXUTq1XnOnTSX7moiG ...

javascriptreactjsfirebasefirebase-realtime-database

Ajax is capable of sending images as part of the data payload

I am attempting to send data via Ajax, and this data may include an image. Unfortunately, I do not have any forms, so I am unable to submit in the traditional way. Here is my HTML code: <input type="file" accept="image/png,image/jpg,image/jpeg,image/ ...

javascriptjqueryajax

What is the best way to retrieve the nearest or preceding object regardless of the document's layout using jQuery?

Here are some examples to illustrate the concept: <ul> <li id="o1" class="elem">apple</li> <li id="o2" class="elem">banana</li> <li id="o3" class="elem">orange</li> </ul> **$('#o2').exact ...

javascriptjqueryajaxjsonxhtml

capturing the HTML title and storing it in a JavaScript variable

Is there a way to retrieve the title "Some Name" in the JS file and have it be populated by the hyperlink's title attribute, which is set to "sometitle" in the HTML code? JS var randomtext={ titleText:"Some Name",} HTML <a class="css" title="so ...

javascripthtmlvariablesvar

Animation effects compatible with iOS devices are professionally crafted using CSS

I just implemented a custom hamburger menu with animation using HTML, CSS, and JavaScript on my website. The animation works perfectly on Android devices but not on iOS. Any suggestions for fixing this issue? I attempted to add the Webkit prefix to each p ...

javascripthtmlcssanimationcss-animations

JavaScript Animation of Text

I have a challenge where I want to animate text's opacity in JavaScript after the user presses enter. However, I am struggling to achieve this with my current code. I can provide all of my code for you to review and help me understand why the animatio ...

javascripthtmlcssanimationtext

Enhancing Image Source URLs with Dynamic Content Using HTML and JavaScript

<img src="https://website.example/convention?plastic_id=**{add-id-here}**&muppet_id=**{add-id-here}**"> I am currently facing a challenge in injecting dynamic content from an external database into the {add-id-here} placeholders. While ...

javascripthtmlemail

Disable button with Checkbox Javascript functionality

In my PHP code, I have an array of users that I pass to the view (in Laravel) and use a foreach loop to display all users in a table. Everything is working fine so far. However, I want to make a "send" button visible when a checkbox is clicked, instead of ...

javascriptphphtmlcheckbox

When a ng-model is added, the input value disappears

i am currently working on a form that contains angular values. <tr ng-repeat="alldata in c.da"> <td>{{alldata.id}}</td> <td><input type="text" class="form-control" value="{{alldata.name}}" ...

javascriptangularjs

Having trouble sending a JavaScript variable to PHP via AJAX

I am attempting to pass a JavaScript variable (a value obtained when a user chooses a random option from a select dropdown menu) into a PHP variable in order to check the attributes of the selected option in my database. The option corresponds to the name ...

javascriptphpjqueryajax