onSelected not firing
softelos opened this issue · comments
I'm trying to determine which menu item has been clicked in order to perform certain actions. I'm trying to use the onSelected callback, but it's not firing when I click on any menu item. Here is my code:
SideBar, a component that embeds the MetisMenu component
import React,{Component} from 'react';
import MetisMenu from 'react-metismenu';
import SideBarMenuLink from './side_bar_menu_link';
import './style_menu.scss';
export default class SideBarMenu extends Component{
constructor(props){
super(props);
}
menuSelected(e){
e.preventDefault();
console.log(e);
}
render(){
const baseUrl=this.props.baseUrl;
const content=[
{
icon: 'calendar',
label: 'My Schedule',
to: '/dashboard/myschedule',
},
{
icon: 'clock-o',
label: 'Time Off',
to: '#a-link',
content: [
{
icon: 'icon-class-name',
label: 'My Requests',
to: '#another-link'
},
{
icon: 'icon-class-name',
label: 'New Request',
to: '#another-link'
},
],
},
{
icon: 'hand-paper-o',
label: 'Exemptions',
to: '#a-link',
content:[
{
icon: 'icon-class-name',
label: 'My Requests',
to: '#a-link'
},
{
icon: 'icon-class-name',
label: 'New Requests',
to: '#a-link'
}
]
},
{
icon: 'file-o',
label: 'Sign-Up Sheet',
to: '#a-link',
},
{
icon: 'file-o',
label: 'Quick Contact',
to: '#a-link',
},
{
icon: 'file-o',
label: 'My Account',
to: '#a-link',
},
{
icon: 'file-o',
label: 'Administration',
to: '#a-link',
content:[
{
icon: 'icon-class-name',
label: 'Users',
to: '/dashboard/admin/users',
},
{
icon: 'icon-class-name',
label: 'Shifts',
to: '/dashboard/admin/users',
}
]
},
{
icon: 'sign-out',
label: 'Log Out',
to:''
},
];
return(
<div id="side-bar-menu">
<MetisMenu content={content} LinkComponent={SideBarMenuLink} onSelected={this.menuSelected} />
</div>
);
}
}
SideBarMenuLink, a Menu Link customization that uses ReactRouter Link component
import React,{Component} from 'react';
import {Link} from 'react-router';
export default class SideBarMenuLink extends Component{
constructor(props) {
super(props);
this.onClick=this.onClick.bind(this);
}
onClick(e){
if(this.props.hasSubMenu){
this.props.toggleSubMenu(e);
}else{
this.props.activateMe({
selectedMenuLabel:this.props.label
});
}
}
render() {
return(
<Link to={this.props.to} className="metismenu-link" onClick={this.onClick}>
{this.props.children}
</Link>
);
}
};
The menuSelected method in the SideBarMenu component never gets called.
Can you please tell me what I'm doing wrong?
Thanks.
Hi @softelos,
First of all this.props.label was not available in custom link. Fortunately it is fixed with v1.2.2. It must be crushed after that.
Other point is that the parameter which you pass with this.props.activateMe is passed directly onSelected listener, so you cant use e event parameter.
To do that you may use this,
// In custom link
this.props.activateMe({
orginalEvent: e, // e comes from onClick
selectedMenuLabel:this.props.label
});// In on menu selected listener
menuSelected(e){
e.orginalEvent.preventDefault();
}Also when you preventDefault it will act like not clicked and link wont be activated.
Thanks for your response @alpertuna !
I tried what you said but nothing happens, the onSelected event doesn't fire at all. The following is my code again with the modifications you suggested, this.menuSelected never gets triggered when I click on any menu:
Custom link implementation component:
import React,{Component} from 'react';
import {Link} from 'react-router';
export default class SideBarMenuLink extends Component{
constructor(props) {
super(props);
this.onClick=this.onClick.bind(this);
}
onClick(e){
if(this.props.hasSubMenu){
this.props.toggleSubMenu(e);
}else{
this.props.activateMe({
originalEvent:e,
selectedMenuLabel:this.props.label
});
}
}
render() {
return(
<Link to={this.props.to} className="metismenu-link" onClick={this.onClick}>
{this.props.children}
</Link>
);
}
};
Component where I insert MetisMenu component, here is where the onSelected event never happens:
import React,{Component} from 'react';
import MetisMenu from 'react-metismenu';
import SideBarMenuLink from './side_bar_menu_link';
import './style_menu.scss';
export default class SideBarMenu extends Component{
constructor(props){
super(props);
}
menuSelected(e){
console.log(e);
}
render(){
const baseUrl=this.props.baseUrl;
const content=[
{
icon: 'calendar',
label: 'My Schedule',
to: '/dashboard/myschedule',
},
{
icon: 'clock-o',
label: 'Time Off',
to: '#a-link',
content: [
{
icon: 'icon-class-name',
label: 'My Requests',
to: '#another-link'
},
{
icon: 'icon-class-name',
label: 'New Request',
to: '#another-link'
},
],
},
{
icon: 'hand-paper-o',
label: 'Exemptions',
to: '#a-link',
content:[
{
icon: 'icon-class-name',
label: 'My Requests',
to: '#a-link'
},
{
icon: 'icon-class-name',
label: 'New Requests',
to: '#a-link'
}
]
},
{
icon: 'file-o',
label: 'Sign-Up Sheet',
to: '#a-link',
},
{
icon: 'file-o',
label: 'Quick Contact',
to: '#a-link',
},
{
icon: 'file-o',
label: 'My Account',
to: '#a-link',
},
{
icon: 'file-o',
label: 'Administration',
to: '#a-link',
content:[
{
icon: 'icon-class-name',
label: 'Users',
to: '/dashboard/admin/users',
},
{
icon: 'icon-class-name',
label: 'Shifts',
to: '/dashboard/admin/users',
}
]
},
{
icon: 'sign-out',
label: 'Log Out',
to:''
},
];
return(
<div id="side-bar-menu">
<MetisMenu content={content} LinkComponent={SideBarMenuLink} onSelected={this.menuSelected} />
</div>
);
}
}
I've checked and the version of MetisMenu I'm using is 1.1.3, that's the one I get from npm. Why 1.2.2 is not the one there?.
Thanks!
Could you reinstall metismenu to get latest version (1.2.2)
npm install react-metismenu --save@alpertuna , I re-installed and now it's 1.2.2 and the onSelected event fires!!!! Thanks.
I've installed react-metismenu a couple of days ago so I believe you must have released 1.2.2 after that :) .
This issue is solved now, thanks.
You are welcome 😊
And yes, that version has just published. 👍