Custom isOpen={} functionality is overwritten when using custom burger icon

[JJwilkin]

Hi,

I want to implement a custom font icon to replace the default burgerIcon, I saw in the documentation that you can use the prop customBurgerIcon={ } and this worked fine for me. The issue I am having is with the isOpen state management. I have the onClick to toggle the menu to open, and when i click a menu item, I have the state toggled to close.

Now here's interesting behaviour I noticed... if I had an customIcon bigger than the original burger icons height and width, and I clicked the portion of the customIcon that did not overlap with where the original burger icon would be, the custom state management works as expected. If I do click a part that is overlapping with the original burger icon, then my custom logic gets overwritten with the default open/close logic and when I click a menu item, the menu doesn't close.

I've attached a screenshot for some clarity.

In the first screenshot, you can see where the original burger icon would be, I set the dimensions to 10x10 as a kind of workaround so if a user clicked that area they would likely click the customIcon and not the default one. But if the original burger icons were bigger, I would frequently click the original burger icon area and my custom logic would be overwritten.

[negomi]

Hey @JJwilkin,

To make sure I understand correctly: you're passing a custom element as an icon (using customBurgerIcon). That element has an onClick handler, which you're using to detect clicks, then handling the open/close functionality yourself?

The customBurgerIcon prop is for passing a custom visual icon, but it's not expecting that icon to have its own click handler, so it doesn't try to disable the default open/close behavior from the underlying button.

A couple of options for how to solve this:

1. Remove the onClick handler from your icon, and use the onStateChange prop to handle state changes instead. More thorough example of how to do that here: https://github.com/negomi/react-burger-menu/wiki/FAQ#i-want-to-control-the-open-state-programmatically-but-i-dont-understand-how-to-use-the-isopen-prop
2. Pass customBurgerIcon={false}, which will remove the default burger button/icon entirely. Then just render your own custom button/icon separately from the menu, and continue to use your current onClick handler.

Hope that helps 🙂

[JJwilkin]

Thanks for the suggestions, the onStateChange did the trick! This was what I needed to implement in order to sync up the states and my custom logic. I included snippets of my code using Functional Components for anyone wondering (since the examples use class components)