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
– BIOSTALL, Commented Nov 10, 2015 at 13:05

BIOSTALL · Accepted Answer · 2015-11-10 16:26:19Z

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, 2015 at 16:26

BIOSTALL

1,69612 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

saran3h Over a year ago

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.

Matan Bobi · Accepted Answer · 2017-01-02 14:05:58Z

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 2, 2017 at 14:05

Matan Bobi

2,8111 gold badge18 silver badges28 bronze badges

9 Comments

Wingjam Over a year ago

Best answer IMO

ArtiomLK Over a year ago

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"

romanown Over a year ago

after updating react to 16.13 i need deleted this plugin. but after it drop down menu not work.

Matan Bobi Over a year ago

@romanown can you please elaborate? This should have been resolved in React 16 and higher.

romanown Over a year ago

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

|

jay.m · Accepted Answer · 2015-11-13 21:50:53Z

1

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

answered Nov 13, 2015 at 21:50

jay.m

1,6283 gold badges16 silver badges29 bronze badges

1 Comment

Muneem Habib Over a year ago

how to do this if we have 2 dropdown with same content?

Collectives™ on Stack Overflow

React Material-UI dropdown menu not working

3 Answers 3

1 Comment

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related