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.
