Can we add a feature so that the menu closes automatically when we enter the overlay?

[naveeniitbhu]

Currently, we can close the menu by clicking on the overlay but not when we enter the overlay. Can we add this feature as I have seen multiple people who require this feature. But since this feature is not available people have to use jquery with react which is not a good practice.

[negomi]

Hi @naveeniitbhu,

When you say 'enter the overlay', do you mean like with keyboard navigation?

If you can provide some more detail, I will try to answer your question :)

[naveeniitbhu]

No. I meant onmouseenter to bm-overlay. Currently, when we click on bm-overlay(i.e. area outside the bm-menu), the menu closes. But I am talking about an option of onmouseneter to bm-overlay to close the menu. For now, I am using jquery to do this. Below is teh jquery code:

componentDidMount() {
    $('.bm-overlay').mouseenter(() => {
      this.props.onCloseDashMenu();
    });
  }

This is not a good practice. But currently this is the only option I have.

[negomi]

Oh I see! In that case, why not just disable the overlay completely with noOverlay?

Having an overlay that disappears on hover sounds a bit confusing to me. It's not a pattern I've seen before, and I'm not sure what benefit it would bring to users.

If you really want to do this though, you don't need jQuery. You can achieve the same hack with plain JavaScript:

componentDidMount() {
  const overlay = document.querySelector('.bm-overlay');
  overlay.addEventListener('mouseenter', () => {
    this.props.onCloseDashMenu();
  });
}