Angularstrap Bs-dropdown With The "hover" Trigger Doesn't Stay Open Long Enough

When using the bs-dropdown with the 'hover' trigger, the menu doesn't stay visible long enough to allow the user to click on a menu item: http://plnkr.co/edit/Fi39BdCOqHXnPAgITD01?

Solution 1:

See this issue for tracking the progress of this issue:

bs-dropdown and trigger hover #638

Solution 2:

That is because hover pseudoevent's mouseleave gets triggered when you hover out of the button to focus on the actual dropdown. Instead you can try providing the container as button itself. Example

<button type="button" 
        class="btn btn-lg btn-primary myButton" 
        bs-dropdown="dropdown" 
        data-container=".myButton">Hover to toggle dropdown</button>

Here i added data-container as myButton which is the class i gave for the same button.

Plnkr

Using delay on hide is of no effect since the hide will eventually happen after the specified delay as the animation gets queued, as you hover out of the button and is going to hide after the delay so you should expect the user to be quick enough to select the dropdown option. But as a work around you can just use container till there is a fix provided for this.

Solution 3:

I am trying to implement a dropdown on a bootstrapped nav bar. After reading the linked github issue in Blade1336's response I added data-container="self". This did make the dropdown visible long enough to click on the dropdown items. Unfortunately, after adding it the menu dropdown items were no longer clickable. data-container="self" also resulted in a slightly wonky ui experience. My code looked like this:

<lidata-match-route="/config*"><abs-dropdown="configDropdown"data-trigger="hover"data-container="self">Config</a></li>

I ended up switching around the tags and placing the bs-dropdown in my <li> tag instead which gave me the desired functionality (my links are clickable again). My code now looks like this:

<lidata-match-route="/config*"bs-dropdown="configDropdown"data-trigger="hover"data-container="self"><a>Config</a></li>

*I kept the <a> tag just for styling purposes