I am creating a simple icon drop-down menu using Material UI. But after rendering the glyph appears and no MenuItems
are shown after clicking on the it. Here is the code -
import { IconMenu, IconButton } from 'material-ui' ;
const MoreVertIcon = require('material-ui/lib/svg-icons/navigation/more-vert');
const MenuItem = require('material-ui/lib/menus/menu-item');
const PostCard = React.createClass({
render: function() {
let button = (
<IconButton
touch={true}
tooltip='Click to see menu.'
tooltipPosition='bottom-left'>
<MoreVertIcon />
</IconButton>
);
return (
<IconMenu iconButtonElement={button}>
<MenuItem primaryText="Refresh" />
<MenuItem primaryText="Send feedback" />
<MenuItem primaryText="Settings" />
<MenuItem primaryText="Help" />
<MenuItem primaryText="Sign out" />
</IconMenu>
);
}
});
I had a similar issue. Solution was to to add this somewhere in the app. I'm not sure if it matters where but I added it at a higher-level as possible:
var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();
Just wanted to add the reason to add injectTapEventPlugin.
According to 300ms tap delay, gone away By Jake Archibald
Browsers stopped waiting 300ms for double taps and react's onClick doesnt give us the proper handle.
and According to react-tap-event-plugin git page
Facebook is not planning on supporting tap events (#436) because browsers are fixing/removing the click delay. Unfortunately it will take a lot of time before all mobile browsers (including iOS' UIWebView) will and can be updated.
Thats why we need to inject the plugin. About the proper solution, I decided to add the package and inject it in the App's constructor (The higer level I have).
The import:
import injectTapEventPlugin from 'react-tap-event-plugin';
And inside the constructor:
injectTapEventPlugin();
In my case I have to add injectTapEventPlugin as well as change handler.
var injectTapEventPlugin = require("react-tap-event-plugin");
const DropDownMenu = require('material-ui/lib/drop-down-menu');
...
injectTapEventPlugin(); // in constructor
...
handleChange(event, selectedIndex, menuItem) {
this.setState({menu: event.target.value });
}
...
// in render
let menuItems = [
{ payload: '0', text: 'Mon - Sun' },
{ payload: '1', text: 'Mon - Sat' },
{ payload: '2', text: 'Mon - Fri' },
{ payload: '3', text: 'Mon - Fri / Mon - Thu' },
];
...
// in render return
<DropDownMenu menuItems={menuItems} selectedIndex={this.state.menu} onChange={this.handleChange} />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With