Ngx-bootstrap: feat(dropdown): add mouseleave event as default trigger for closing dropdown

[valentinbdv]

Hi,

I would like to have a dropdown which is shown when mouseover, so I have use the triggers input (triggers="mouseover").
It is working great but now I want to toggle the dropdown at the mouseleave event and I haven't find a simple way to do that with your doc.

Have I missed something? I could add an angular ngIf but it would be a shame. ;)

Thanks, valentin

[valorkin]

Hey, triggers="hover" should work

[robdunnwinning]

From what I can read you are looking at hiding the dropdown on "mouseout" or something similar.

triggers="hover" only fires the dropdown on hover, it does not hide the dropdown on mouseout.

@valorkin is there any way to hide the dropdown when the mouse leaves?

I have made a plnkr to demonstrate current functionality of hover (i.e. not closing when not hovering)

https://embed.plnkr.co/AGHe8bCb46YxRbGrsTcS/

[valentinbdv]

Exactly @robdunnwinning, looking for a way to close the dropdown at the mouseout event.

Same thing for me the triggers="hover" doesn't work.

[valorkin]

 <div class="btn-group" dropdown triggers="hover" 
  #dp="bs-dropdown">
  <ul *dropdownMenu class="dropdown-menu" role="menu" 
(mouseleave)="dp.hide()">

Thanks for plunker, here we go
It hides on mouseleave, is this what you wanted?

[valentinbdv]

Yes, this is exactly what I wanted! Thanks.

But I think it would be better if it would be a default behavior of the trigger hover event because this is what we expect of an hover.

Bye, Valentin

[valorkin]

it's not so simple :(

[davenlin19]

There is still a problem @valorkin. Move your mouse from the ul to the trigger then move it to the outside of the trigger. The ul does not disappear in this case.

[xigolle]

@davenlin19 It is pretty easy to accomplish this if you take the code snippet from @valorkin :

<div class="btn-group" dropdown triggers="hover" 
  #dp="bs-dropdown">
  <ul *dropdownMenu class="dropdown-menu" role="menu" 
(mouseleave)="dp.hide()">

You just have to change that to the following code:

<div class="btn-group" (mouseleave)="dp.hide()" dropdown triggers="hover" 
  #dp="bs-dropdown">
  <ul *dropdownMenu class="dropdown-menu" role="menu" 
(mouseleave)="dp.hide()">

So adding the mouseleave event on the trigger & on the dropdown menu.
This way it will close when leaving the dropdown as when leaving the trigger.

The thing to note here that there dropdown & trigger should be "attached" to each other.
If they are distant from each other it will close.

If it isn't clear or the solution doesn't work let me know!

[daniloff200]

Solution from above should help with that issue
Closed