Material-ui: Dropdown doesnt work.

[darklilium]

Hello,

First of all im sorry for posting this here, i know that i have to use stackoverflow but to me its more efficient here.
I have an issue with the material-ui lib, where the dropdowns and menu doesnt work.

My code is the following.

import React from 'react';

import {Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle} from 'material-ui/Toolbar';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
import injectTapEventPlugin from 'react-tap-event-plugin';


class Interruptions extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
        value: 1
      };

      injectTapEventPlugin();
  }
  handleChange(event, index, value) {
    this.setState({value: value});
  }

  render(){
    return (
    <div className="interruptions__wrapper">
    <Toolbar>
     <ToolbarGroup firstChild={true}>
       <DropDownMenu value={this.state.value} openImmediately={true} onChange={this.handleChange}>
         <MenuItem value={1} primaryText="All Broadcasts" />
         <MenuItem value={2} primaryText="All Voice" />
         <MenuItem value={3} primaryText="All Text" />
         <MenuItem value={4} primaryText="Complete Voice" />
         <MenuItem value={5} primaryText="Complete Text" />
         <MenuItem value={6} primaryText="Active Voice" />
         <MenuItem value={7} primaryText="Active Text" />
       </DropDownMenu>
     </ToolbarGroup>
     <ToolbarGroup>
       <ToolbarTitle text="Options" />

     </ToolbarGroup>
   </Toolbar>
    </div>
    );
  }
}

export default Interruptions;

And this is my main where i render the app in the html.

import React from 'react';
import ReactDOM from 'react-dom';
import Interruptions from '../components/Interruptions.jsx';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import {red500} from 'material-ui/styles/colors';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';


const muiTheme = getMuiTheme({
  palette: {
    textColor: red500,
  }
});

const InterruptionsApp = () => (
  <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
    <Interruptions />
  </MuiThemeProvider>
)


ReactDOM.render(<InterruptionsApp />, document.getElementById('myInterruptions'));

I have read issues fom this repo and in stackov. but it didnt work on helping me to solve this.

Im using openImmediately={true} to see if atleast the menu is showing up (and it does) but when i try to click on it to open it again it doesnt show.

Thanks in advice.

[oliviertassinari]

Could you provide a reproduction test case? That would help a lot 👷 .
You can use this playground to do so: http://www.webpackbin.com/VkAAPiWkM.
Thanks.

[darklilium]

Uhm, i was trying but i dont know how to share it D: . http://www.webpackbin.com/NJJO9oCxM

[lucasbento]

@darklilium: http://www.webpackbin.com/N1Z0t9xWG

Please answer if this working bin solves your issue.

Your problem seems to be about developing with React, not with Material UI itself.

Also, use stackoverflow for next regular questions, the chances that you get an answer faster are much better than here.

[oliviertassinari]

@lucasbento Thanks, your example is working :). I'm closing this issue.