$('.btn-group').on('focus', '.dropdown-menu li a', function() {
$(this).parents('.dropdown-menu').find('li').removeClass('active');
$(this).parent('li').addClass('active');
//Displays selected text on dropdown-toggle button
$(this).closest(":has(button)").find('button').html('<div class="dropDownSelected">' + $(this).html() + '</div>' + '<span class="caret" style="float:right;"></span>');
});
.btn-group,
.dropdown-menu {
max-width: 150px;
}
.dropdown-menu li a {
white-space: normal!important;
;
}
.dropDownSelected {
white-space: normal;
margin-right: 22px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li><a href="#">Separated link which is of two lines or more</a>
</li>
</ul>
</div>
<div>
Step 1: Click on single line option value inside dropdown.
Step 2: Now click on some multiple lines option value inside dropdown.
Step 3: Now once again click on some single line option value inside dropdown.
Issue: After step 3 the dropdown list(i.e., ul) is not disappearing.
Expected Result: After step 3 the dropdown list(i.e., ul) should disappear on every selection of options(both on mouse click and keyboard usage).
Please ignore caret and design related minor bugs
Why won't you close the list manually?
Replace this line:
$(this).parents('.dropdown-menu').find('li').removeClass('active');
With this:
$(this).parents('.dropdown-menu').parent().removeClass('open').end().find('li').removeClass('active');
This would be the end code:
$('.btn-group').on('focus', '.dropdown-menu li', function() {
$(this).siblings('.active').removeClass('active').end().addClass('active');
//Displays selected text on dropdown-toggle button
$(this).closest(":has(button)").find('button').html('<div class="dropDownSelected">' + $(this).children('a').html() + '</div>' + '<span class="caret" style="float:right;"></span>');
}).on('click mouseup', '.dropdown-menu li a', function() {
$(this).parents('.dropdown-menu').parent().removeClass('open');
});
.btn-group,
.dropdown-menu {
max-width: 150px;
}
.dropdown-menu li a {
white-space: normal!important;
;
}
.dropDownSelected {
white-space: normal;
margin-right: 22px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li><a href="#">Separated link which is of two lines or more</a>
</li>
</ul>
</div>
<div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With