Close menu after select (click) any child

[edcolcode]

Hi,

Thanks for this awesome component.
I'm using it to trigger some actions but I want to close the menu after the user clicks in some child element.

¿Any ideas?
Regards.

[edcolcode]

Well I found a way to do it:

Create a ref for the menu:
<Menu ... ref={(node) => this.node = node}>

Then create a helper for the onClick method of childMenu:
onClickHelper= () => { ... this.node.toggleMenu(event); };

Add the helper function to the onClick method of the childMenu:
<ChildButton ... onClick={onClickHelper}/>

If there is another better way to do it please share it.
Regards.

[adoundakov]

I'm not sure what the cause is, but the current version of react-mfb does not pass an event to the handleOnClick method of ChildButton. You can hack this locally by editing the child-button.js file to pass along the event.

What I ended up doing is stubbing a fakeEvent:

const fakeEvent = {preventDefault: () => {}};

Then passing this along in onClickHelper

onClickHelper = () => { ... this.node.toggleMenu(fakeEvent); };

EDIT: It appears pull request #19 is open to address this issue.

[ramyres110]

I'm here for this too...
My solution until now is...

...
const mainMenuRef = React.createRef()
...
<MainButton ref={mainMenuRef} iconResting="fa fa-plus" iconActive="fa fa-times" className="bg-primary text-white" />
...
const handleChildBtnClick = (e) => {
        const el = ReactDOM.findDOMNode(mainMenuRef.current);
        if(el) el.click();
}

Or better (I think)... editado

const [mainMenuEl, setMainMenuEl] = useState(null);
...
useEffect(() => {
    setMainMenuEl(ReactDOM.findDOMNode(mainMenuRef.current));
}, []);
...
const handleChildBtnClick = (
     ...
     if (mainMenuEl) {
         mainMenuEl.click();
     }
}

[atishwarchand]

@ramyres110 I am facing the issue where the icon is not showing. Can you help me in that please