How to disable menu closing when item is clicked

[shareef1989]

trafficstars

Hi,

I want to use dropdown menus inside Slider menu, but when item is clicked, the Slider get closed. How to prevent closing event from being triggered in this case ?

[mbj36]

@shareef1989 Is it possible for you to make a small demo on codesandbox so that i can figure out your solution ?

[ptdev]

I also have this. It's caused most likely by this code.

To test, on your own demo, try to add inside the nav something like:

<span>Some disabled link</span>

And then click it and you'll see that the drawer closes.

The way the drawer is closed is by checking the click event target against a bunch of negatives. This is not ideal and is related with the overlay issues i mentioned on #34. As stated there, one solution is to have an actual overlay div. That div, along with the close button, should be the only ways to close the drawer. That way, the closeDrawer method could be simply bound only to clicks on the overlay or close button and not the current method of detecting clicks on the document and then using the click event to rule out stuff by checking if there's class X or if it's inside some other element, etc.

[mbj36]

@ptdev I really appreciate your issue and points on how to improve the library...I am very happy to accept PR which helps improving the library

Let me know if i can help you in your PR and any questions you have

[edum18]

@ptdev thanks for updating the component. However I'm still facing the same problem of this issue: the tab closes everytime I click on any element inside it (inside of the element with class bm-item-list which is all content on the bar). Not sure if it's a problem on my side though. I read on #35 that you said "should fix" this issue so I'm not sure. Did you test it?

[ptdev]

Hi @edum18,

Yes, my pull request fixes the issue with the closing since it now only closes when specifically clicking the close button or the overlay (outside the slider).

The pull request wasn't accepted though so you won't get it with just an npm update. You'll have to update it manually.

I personally just took the pieces I needed and created my own drawer component that's imported on my app from my components folder. (i.e.: no longer using vue-burger-menu from npm).

You can try and do the same with this file from my pull request.

See also the examples posted here.

Let me know if you have issues and I'll try and help you out. Good luck

[k29]

@mbj36 Any idea when this PR will be accepted and available with npm?

[edellaq]

experiencing the problem too, trying to insert a recursive TreeMenu into the Slider compoent... is there at least a way to intercept the CloseMenu event and manage it on purpose?