Odd Angular/Bootstrap Dropdown Behavior

Question

I've got an application requiring a series of dropdowns. The functionality requires me to be able to switch between normal dropdown behavior and multi-select behavior.

I have made slight modifications to the ui.boostrap.dropdown from the Angular Directives for Bootstrap (see Dropdown). Everything works well, except for a gray bar after clicking (looks like the :hover css stays active after clicking) when in Multiselect mode.

When I toggle off then back on, the highlight goes away, as if the hover event has somehow completed.

Process:

Open the dropdown
Click Multiselect
Move the mouse and Multiselect stays highlighted, as if the ":focus" tag is not removed.

Visually: The mouse is over 345 in this image, Multiselect should not be highlighted.

Multiselection

Angular HTML for dropdown:

<div ng-controller="DropdownCompanyController as vm">
    <div class="btn-group u-front_dropdown-wide" dropdown is-open="vm.isopen">
        <button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>
            {{ vm.selected }} <span class="caret"></span>
        </button>

        <ul class="dropdown-menu" role="menu" ng-click="vm.checkMultiSelect($event)">
            <li ng-repeat="company in vm.companies"
                ng-class="{ selected : company.selected }">
                <a href="#" ng-click="vm.event.select(company)">{{ company.name }}</a>
            </li>

            <li class="divider"></li>
            <li class="ng-scope" ng-class="{selected : vm.multi.select }">
                <a href="#"
                    ng-click="vm.event.multiselect()"
                    ng-class="{ multi: vm.multi.select }">Multiselect</a>
                <button
                    ng-hide="!vm.multi.select"
                    ng-class="{ multi_button: vm.multi.select }"
                    ng-click="vm.event.close_dropdown($event)">Close</button>
            </li>
        </ul>
    </div>
</div>

Here's the event where the click on an element is handled:

vm.event = {};
vm.event.select = function(company) {
    if (!vm.multi.select) {
        clearCompanies(false);
        company.selected = true;
        vm.selected = company.name;
        vm.isopen = false;
    } else {
        if (company.name !== vm.defaultCompany) {
            company.selected = !company.selected;
            vm.selected = vm.multi.title + countCompanies();
        }
    }
};

Link to Plunker.

I have had no luck tracking this down and my instinct is that the issue is in the CSS, but it's standard bootstrap CSS. Any assistance would be appreciated.

acg · Accepted Answer · 2015-03-02 21:23:16Z

1

If you just dont want any item to have the highlight then in your own custom app.css file override the focus state with white:

.dropdown-menu > li > a:focus {
  background-color: white;
}

Without doing a custom bootstrap build just add the hover following the focus to to keep the grey highlight:

 .dropdown-menu > li > a:hover {
      background-color: lightgray;
    }

edited Mar 2, 2015 at 21:23

answered Mar 2, 2015 at 20:00

acg

9615 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bob-fornal Over a year ago

+1: This is absolutely a thought I had, but I do want the highlighting when focused, just not after the click event.

acg Over a year ago

@rfornal, so isn't that just about breaking out the override of the hover as well in your app.css file? see above.

bob-fornal Over a year ago

Tested this on the Plunker ... I'm sure I tried something like this; I guess the operative word is "LIKE". Thanks for setting me straight.

Collectives™ on Stack Overflow

Odd Angular/Bootstrap Dropdown Behavior

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related