React Material-UI dropdown menu not working
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();
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} />
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();