Avoid dropdown menu close on click inside
Removing the data attribute data-toggle="dropdown"
and implementing the open/close of the dropdown can be a solution.
First by handling the click on the link to open/close the dropdown like this :
$('li.dropdown.mega-dropdown a').on('click', function (event) {
$(this).parent().toggleClass('open');
});
and then listening the clicks outside of the dropdown to close it like this :
$('body').on('click', function (e) {
if (!$('li.dropdown.mega-dropdown').is(e.target)
&& $('li.dropdown.mega-dropdown').has(e.target).length === 0
&& $('.open').has(e.target).length === 0
) {
$('li.dropdown.mega-dropdown').removeClass('open');
}
});
Here is the demo :
http://jsfiddle.net/RomaLefrancois/hh81rhcm/2/
Prevent dropdown from closing if click is happening inside the dropdown menu
I updated your HTML file (see below) so that the event.stopPropagation() method is called directly once the user clicks on the dropdown. Seems to be working, I found the answer here: How to prevent an angular-bootstrap dropdown from closing (Unbind Event which was bound by a directive)
The openDropdown() method can be removed from the ts file. Hope this helps!
<div class="container"> <div> <div class="btn-group" dropdown> <div dropdownToggle id="pencilColorPicker"> <img class="icon" src="https://www.burns-360.com/wp-content/uploads/2018/09/Sample-Icon.png"> </div>
<ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" (click)="$event.stopPropagation()" role="menu" aria-labelledby="button-basic"> <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li> <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li> </ul> </div> </div>
<div> <div class="btn-group" dropdown> <div dropdownToggle id="pencilColorPicker"> <img class="icon" src="https://www.burns-360.com/wp-content/uploads/2018/09/Sample-Icon.png"> </div>
<ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" (click)="$event.stopPropagation()" role="menu" aria-labelledby="button-basic"> <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li> <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li> </ul> </div> </div>
</div>
How do I prevent my dropdown from closing when clicking inside it?
'.dropdown-menu'
catches the the bubble. There is no need to catch elements inside of the dropdown in this case.
e.stopPropagation()
prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
$('.dropdown-menu').on('click', function(e) {
e.stopPropagation();
});
How to avoid dropdown menu hiding while click on checkbox inside the dropdown list items?
Add onClick={(e) => e.stopPropagation()}
in <Form.Check>...</Form.Check>
.e.stopPropagation()
in tag will help this tag prevent onClick event from parent.
Code here: https://codesandbox.io/s/dropdown-with-checkbox-forked-88h9m6?file=/src/App.js
import "./styles.scss";
import "bootstrap/dist/css/bootstrap.min.css";
import { Dropdown, Form } from "react-bootstrap";
export default function App() {
return (
<div className="App">
<Dropdown className="dropdown-groove">
<Dropdown.Toggle variant="outline-secondary " id="dropdown-basic">
Select...
<label className="dropdown-label">Dropdown label</label>
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">
{" "}
<Form.Check
onClick={(e) => e.stopPropagation()} //<=== Add here
className="checkbox-groove"
inline
label="Unselected"
name="group1"
type="checkbox"
/>{" "}
</Dropdown.Item>
<Dropdown.Item href="#/action-2">List Item 2</Dropdown.Item>
<Dropdown.Item href="#/action-3">List Item 3</Dropdown.Item>
<Dropdown.Item href="#/action-4">List Item 4</Dropdown.Item>
<Dropdown.Item href="#/action-5">List Item 5</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
);
}
Avoid dropdown close on clicking outside
Bootstrap 4 Dropdown eventing is slightly different than Bootstrap 3, therefore the suggested duplicates (and here) will not work to prevent the dropdown from closing on an outside click.
For Bootstrap 4, look for the clickEvent
, and when found in the hide
event, prevent the default close behavior. This dropdown will only close when the button is clicked.
$('#myDD').on('hide.bs.dropdown', function (e) {
if (e.clickEvent) {
e.preventDefault();
}
})
Demo
In some cases, you may want the Dropdown to close when the button or menu is clicked. In this case you can examine the clickEvent target. For example, look for the 'nav-link' class.
$('#myDD').on('hide.bs.dropdown', function (e) {
if (e.clickEvent && e.clickEvent.target.className!="nav-link") {
e.preventDefault();
}
});
Demo 2
Keep Bootstrap Dropdown Open When Clicked Inside
You can use the following JavaScript to manually open and close the dropdown menu:
$(function() {
$('.dropdown-toggle').on('click', function(event) {
$('.dropdown-menu').slideToggle();
event.stopPropagation();
});
$('.dropdown-menu').on('click', function(event) {
event.stopPropagation();
});
$(window).on('click', function() {
$('.dropdown-menu').slideUp();
});
});
Demo in StackSnippets
$(function() {
$('.dropdown-toggle').on('click', function(event) { $('.dropdown-menu').slideToggle(); event.stopPropagation(); });
$('.dropdown-menu').on('click', function(event) { event.stopPropagation(); });
$(window).on('click', function() { $('.dropdown-menu').slideUp(); });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="navbar"> <nav class="navbar navbar-default navbar-static-top" role="navigation"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">MENU</a> <div class="dropdown-menu"> <p>Hello</p> <input type="text"> </div> </li> </ul> </nav></div>
Prevent Bootstrap dropdown from closing on clicks
You need to stop event from bubbling up the DOM tree:
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
event.stopPropagation
prevents event from reaching the node where it's eventually handled by Bootstrap hiding menu.
Demo: http://jsfiddle.net/wkc5md23/3/
Related Topics
Onchange Event on Input Type=Range Is Not Triggering in Firefox While Dragging
Are HTML Comments Inside Script Tags a Best Practice
Use Html5 to Resize an Image Before Upload
JavaScript; Communication Between Tabs/Windows With Same Origin
Populate One Dropdown Based on Selection in Another
Difference Between ≪Script Src="Foo.Js"≫≪/Script≫ and ≪Script Src="Foo.Js"/≫
How Is the Default Submit Button on an HTML Form Determined
How to Properly Use Jspdf Library
(Html) Download a Pdf File Instead of Opening Them in Browser When Clicked
Es2015 Import Doesn't Work (Even At Top-Level) in Firefox
How to Add Line Breaks to an HTML Textarea
How to Prevent Unicode Characters from Rendering as Emoji in HTML from JavaScript
Is There an Onselect Event or Equivalent For HTML ≪Select≫
Video Auto Play Is Not Working in Safari and Chrome Desktop Browser