I'm making a search filter rendered as a dropup: it's a dropdown - presented as a bootstrap dropup - with some checkboxes (plus labels) inside.
If I press the checkboxes everything works fine, but whenever I press a checkbox's label instead, the whole dropup turns blue while the mouse is down and disappears when the mouse is up. The radio button is actually selected, but then I have to re-open the dropup to keep on selecting the other radio buttons I wish to select.
Here's the code:
<!DOCTYPE html>
<html>
<body>
<section id="homeSearchSection" class="search homeSearch">
<div id="homeSearchDiv" class="container text-center">
<div id="homeSearchDiv" class="form-holder">
<h2>Onde comer?</h2>
<p class="lead">Use o nome do estabelecimento ou a sua localização.</p>
<form id="homeSearch" action="#" method="post">
<div class="form-group row" id="formGroupHome">
<div class="col-lg-9 col-md-12">
<input class="searchInput" type="text" name="search" id="search" placeholder="Procure aqui...">
<button type="submit" class="btn btn-primary btn-gradient submit homeSearchSubmit"><span style="font-size: 24px;" class="icon-loupe"></span></button>
</div>
<div class="col-3 dropup dropdownHome">
<button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">Pesquisa avançada</button>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-item">
<div class="row">
<div class="col" style="border-right: solid #0084FF 1px;">
<h6 class="dropdown-header">Gastronomia:</h6>
<label class="dropdown-item"><input type="checkbox"> Italiana</label>
<label class="dropdown-item"><input type="checkbox"> Chinesa</label>
<label class="dropdown-item"><input type="checkbox"> Portuguesa</label>
<label class="dropdown-item"><input type="checkbox"> Mexicana</label>
<label class="dropdown-item"><input type="checkbox"> Brasileira</label>
</div>
<div class="col" style="border-right: solid #0084FF 1px;">
<h6 class="dropdown-header">Regime alimentar:</h6>
<label class="dropdown-item"><input type="checkbox"> Vegetariano</label>
<label class="dropdown-item"><input type="checkbox"> Vegan</label>
<label class="dropdown-item"><input type="checkbox"> Macrobiótico</label>
</div>
<div class="col">
<h6 class="dropdown-header">Tipo de comida:</h6>
<label class="dropdown-item"><input type="checkbox"> Carne</label>
<label class="dropdown-item"><input type="checkbox"> Peixe</label>
<label class="dropdown-item"><input type="checkbox"> Kebab</label>
<label class="dropdown-item"><input type="checkbox"> Picanha</label>
<label class="dropdown-item"><input type="checkbox"> Marisco</label>
<label class="dropdown-item"><input type="checkbox"> Hambúrguer</label>
</div>
<div class="col" style="border-right: solid #0084FF 1px;">
<h6 class="dropdown-header"> </h6>
<label class="dropdown-item"><input type="checkbox"> Pizza</label>
<label class="dropdown-item"><input type="checkbox"> Francesinha</label>
<label class="dropdown-item"><input type="checkbox"> Sandes</label>
</div>
<div class="col" style="border-right: solid #0084FF 1px;">
<h6 class="dropdown-header">Tipo de refeição:</h6>
<label class="dropdown-item"><input type="checkbox"> Gourmet</label>
<label class="dropdown-item"><input type="checkbox"> Self-service</label>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</section>
</body>
</html>
Thanks in advance for any kind of help and please tell me if you need more info.
Please try this (NB: you may find better solution than this. Checked in Chrome v65)
You need to have the below JavaScript code to make it work.
$('body').on('hide.bs.dropdown', '.dropdownHome', function (e) {
if(event.target.nodeName == "LABEL") {
return false;
}
});
$('body').on('hide.bs.dropdown', '.dropdownHome', function (e) {
if(event.target.nodeName == "LABEL") return false;
});<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<section id="homeSearchSection" class="search homeSearch">
<div id="homeSearchDiv" class="container text-center">
<div id="homeSearchDiv" class="form-holder">
<h2>Onde comer?</h2>
<p class="lead">Use o nome do estabelecimento ou a sua localização.</p>
<form id="homeSearch" action="#" method="post">
<div class="form-group row" id="formGroupHome">
<div class="col-lg-9 col-md-12">
<input class="searchInput" type="text" name="search" id="search" placeholder="Procure aqui...">
<button type="submit" class="btn btn-primary btn-gradient submit homeSearchSubmit"><span style="font-size: 24px;" class="icon-loupe"></span></button>
</div>
<div class="col-3 dropup dropdownHome">
<button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">Pesquisa avançada</button>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-item">
<div class="row">
<div class="col" style="border-right: solid #0084FF 1px;">
<h6 class="dropdown-header">Gastronomia:</h6>
<label class="dropdown-item"><input type="checkbox"> Italiana</label>
<label class="dropdown-item"><input type="checkbox"> Chinesa</label>
<label class="dropdown-item"><input type="checkbox"> Portuguesa</label>
<label class="dropdown-item"><input type="checkbox"> Mexicana</label>
<label class="dropdown-item"><input type="checkbox"> Brasileira</label>
</div>
<div class="col" style="border-right: solid #0084FF 1px;">
<h6 class="dropdown-header">Regime alimentar:</h6>
<label class="dropdown-item"><input type="checkbox"> Vegetariano</label>
<label class="dropdown-item"><input type="checkbox"> Vegan</label>
<label class="dropdown-item"><input type="checkbox"> Macrobiótico</label>
</div>
<div class="col">
<h6 class="dropdown-header">Tipo de comida:</h6>
<label class="dropdown-item"><input type="checkbox"> Carne</label>
<label class="dropdown-item"><input type="checkbox"> Peixe</label>
<label class="dropdown-item"><input type="checkbox"> Kebab</label>
<label class="dropdown-item"><input type="checkbox"> Picanha</label>
<label class="dropdown-item"><input type="checkbox"> Marisco</label>
<label class="dropdown-item"><input type="checkbox"> Hambúrguer</label>
</div>
<div class="col" style="border-right: solid #0084FF 1px;">
<h6 class="dropdown-header"> </h6>
<label class="dropdown-item"><input type="checkbox"> Pizza</label>
<label class="dropdown-item"><input type="checkbox"> Francesinha</label>
<label class="dropdown-item"><input type="checkbox"> Sandes</label>
</div>
<div class="col" style="border-right: solid #0084FF 1px;">
<h6 class="dropdown-header">Tipo de refeição:</h6>
<label class="dropdown-item"><input type="checkbox"> Gourmet</label>
<label class="dropdown-item"><input type="checkbox"> Self-service</label>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</section>A different approach
$(document).click(function(e) {
if($(e.target).closest(".dropdownHome").length === 0 ) {
$('.dropdown-menu').removeClass('show');
}
});
$('.dropdownHome').on("hide.bs.dropdown", function() {
return false;
});
$(document).click(function(e) {
if($(e.target).closest(".dropdownHome").length === 0 ) {
$('.dropdown-menu').removeClass('show');
}
});
$('.dropdownHome').on("hide.bs.dropdown", function() {
return false;
});<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<section id="homeSearchSection" class="search homeSearch">
<div id="homeSearchDiv" class="container text-center">
<div id="homeSearchDiv" class="form-holder">
<h2>Onde comer?</h2>
<p class="lead">Use o nome do estabelecimento ou a sua localização.</p>
<form id="homeSearch" action="#" method="post">
<div class="form-group row" id="formGroupHome">
<div class="col-lg-9 col-md-12">
<input class="searchInput" type="text" name="search" id="search" placeholder="Procure aqui...">
<button type="submit" class="btn btn-primary btn-gradient submit homeSearchSubmit"><span style="font-size: 24px;" class="icon-loupe"></span></button>
</div>
<div class="col-3 dropup dropdownHome">
<button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">Pesquisa avançada</button>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-item">
<div class="row">
<div class="col" style="border-right: solid #0084FF 1px;">
<h6 class="dropdown-header">Gastronomia:</h6>
<label class="dropdown-item"><input type="checkbox"> Italiana</label>
<label class="dropdown-item"><input type="checkbox"> Chinesa</label>
<label class="dropdown-item"><input type="checkbox"> Portuguesa</label>
<label class="dropdown-item"><input type="checkbox"> Mexicana</label>
<label class="dropdown-item"><input type="checkbox"> Brasileira</label>
</div>
<div class="col" style="border-right: solid #0084FF 1px;">
<h6 class="dropdown-header">Regime alimentar:</h6>
<label class="dropdown-item"><input type="checkbox"> Vegetariano</label>
<label class="dropdown-item"><input type="checkbox"> Vegan</label>
<label class="dropdown-item"><input type="checkbox"> Macrobiótico</label>
</div>
<div class="col">
<h6 class="dropdown-header">Tipo de comida:</h6>
<label class="dropdown-item"><input type="checkbox"> Carne</label>
<label class="dropdown-item"><input type="checkbox"> Peixe</label>
<label class="dropdown-item"><input type="checkbox"> Kebab</label>
<label class="dropdown-item"><input type="checkbox"> Picanha</label>
<label class="dropdown-item"><input type="checkbox"> Marisco</label>
<label class="dropdown-item"><input type="checkbox"> Hambúrguer</label>
</div>
<div class="col" style="border-right: solid #0084FF 1px;">
<h6 class="dropdown-header"> </h6>
<label class="dropdown-item"><input type="checkbox"> Pizza</label>
<label class="dropdown-item"><input type="checkbox"> Francesinha</label>
<label class="dropdown-item"><input type="checkbox"> Sandes</label>
</div>
<div class="col" style="border-right: solid #0084FF 1px;">
<h6 class="dropdown-header">Tipo de refeição:</h6>
<label class="dropdown-item"><input type="checkbox"> Gourmet</label>
<label class="dropdown-item"><input type="checkbox"> Self-service</label>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</section></div>
The reason why the whole dropup turns blue is because you wrapped everything with one dropdown-item. When you're pressing a button's label, you're also pressing that dropdown item as well. The click event is propagating to and activating its parent dropdown item.
If you look at the default bootstrap4 style:
.dropdown-item.active, .dropdown-item:active {
color: #fff;
text-decoration: none;
background-color: #007bff;
}
That's why you're seeing that primary color background.
If you want to keep using dropdown menu to contain all your checkboxes, you need to stop the click event from propagating to parents, and change the active style of the dropdown-item.
$(".dropdown-item").click(function(e){
e.stopPropagation();
})
.dropdown-item:active {
background-color: #fff;
}
Fiddle: http://jsfiddle.net/aq9Laaew/87023/
Depends on your application, you might want to try using modal instead of the dropdown for your checkboxes (by the way, they're not radio buttons).