Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?p=preview

Using a delay makes it behave in unexpected ways:

http://plnkr.co/edit/Y2Q63DDJEyP9CTPMUfYD?p=preview

Ideally the dropdown should stay up as long as the mouse is on the menu, and disappear when the mouse leaves the menu.

like image 280
Nader Chehab Avatar asked May 18 '26 22:05

Nader Chehab


2 Answers

See this issue for tracking the progress of this issue:

bs-dropdown and trigger hover #638

like image 53
Blade1336 Avatar answered May 20 '26 10:05

Blade1336


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.

like image 29
PSL Avatar answered May 20 '26 10:05

PSL