React Material-UI dropdown menu not working

Question

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>     
        );
    }
});

Did you find a solution to this? Having exactly the same problem here... — BIOSTALL, Nov 10 '15 at 13:05

score 21 · Accepted Answer · answered Nov 10 '15 at 16:26

21

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();

answered Nov 10 '15 at 16:26

BIOSTALL

1,656
12
25

just fyi. this has been fixed now with react v16+. no need to add these statements. Having these lines may actually slow down the click response to the user. – saran3h Jan 21 '19 at 08:27

score 5 · Answer 2 · answered Jan 02 '17 at 14:05

5

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();

answered Jan 02 '17 at 14:05

Matan Bobi

2,693
1
15
27

Best answer IMO – Wingjam Apr 28 '17 at 15:34
If you use React +16.4 you don't need to add the plugin. Just add in the package.json dependencies:`"react": "16.4.0", "react-dom": "16.4.0"` – ArtiomLK Jun 10 '18 at 18:29
after updating react to 16.13 i need deleted this plugin. but after it drop down menu not work. – romanown Dec 20 '20 at 16:51
@romanown can you please elaborate? This should have been resolved in React 16 and higher. – Matan Bobi Dec 21 '20 at 06:11
i have project where used var injectTapEventPlugin = require("react-tap-event-plugin"); injectTapEventPlugin(); after update the react from 15.4 to 16.13 i have error. in SO i find need delet this plugin. i deletit this. error is go out. buh drop down menu not have work. i only deleted this 2 string var injectTapEventPlugin = require("react-tap-event-plugin"); injectTapEventPlugin(); may be i need to edit my other the code? i to try v4 the material-ui – romanown Dec 21 '20 at 06:52
No, removing the `require` or `import` and the usage should fix your problem. What's the error you're getting now? – Matan Bobi Dec 22 '20 at 19:13
@Matan Bobi Sorry I didn't see your message. there is no error. the drop-down menu doesn't work. i can see clicking on the item but the items do not appear. – romanown Jan 01 '21 at 11:03
@romanown sounds to me like you should open a new issue for this and elaborate on what's happening and what you see.. I don't think it's related to this issue, sorry. – Matan Bobi Jan 03 '21 at 06:33
I'm using react ^16.4.0 and the menu doesn't work, so all the comments stating things along the lines of "not needed with 6.14" are not clear at all – Anna T Jun 16 '21 at 18:09

score 1 · Answer 3 · answered Nov 13 '15 at 21:50

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} />

how to do this if we have 2 dropdown with same content? – Muneem Habib Nov 25 '16 at 17:42 — Muneem Habib, Nov 25 '16 at 17:42

React Material-UI dropdown menu not working

3 Answers3