CODEWITHSUNDEEP
twitter-bootstrap
Lloyd Banks
Lloyd Banks

Reputation: 36638

Bootstrap Drop Down Menu Causes Focus to Shift to Top of Page

I have a Bootstrap drop down menu. When I select a value from the drop down menu, the focus shifts to the top of the page. The class options for the drop down menu are as follows:

<a class = "btn dropdown-toggle" data-toggle = "dropdown" data-target = "#">
    <span class = "caret"></span>
</a>

jFiddle example here. You'll need to scroll down on the results window to the see drop down menu.

What's the best way to remedy this behavior?

Upvotes: 12

Views: 6401

Answers (2)

Glenn
Glenn

Reputation: 688

Accepted answer works but there is a second issue with long selection lists. If the drop down has many items, eg countries, then the user can scroll up or down to select one. The whole page scrolls. The scroll position then stays at that position after the user makes a selection.

I fixed this by applying the accepted answer and by also adding a: 

@ViewChild('toggleButton') toggleButton: ElementRef;

property on the toggle button and then calling:

this.toggleButtton.nativeElement.focus();

when a selection was made. I know using nativeElement is not recommended for Web Worker reasons, but I'm not using a web worker so it is a solution for me.

Using Bootstrap 4.1.0.

Upvotes: 0

Jimmyt1988
Jimmyt1988

Reputation: 21116

In your code you have # anchors.

When someone clicks on this, the browser will go to the top of the page in search for an anchor that does not exist.

Even if you remove the #, the link will think it needs to refresh the page.

If you need the anchor for styling, do something like this:

<a href = "javascript:return false;">link text</a>

http://jsfiddle.net/W7gbj/7/

Upvotes: 26

Related Questions