CODEWITHSUNDEEP
reactjsmaterial-ui
Aharon Haber
Aharon Haber

Reputation: 3

React Material UI SelectField menu items not appearing

Using Material-UI 0.15.1, React 15.2.0 When I click on the SelectField dropdown I get an empty dropdown appearing with out the menu choices appearing. When I use hardcoded MenuItems in the SelectField I see the full menu without issue.

This does not appear to be an injectTapEventPlugin as I am importing it and calling it. My code is below:

render() {
var divStyle = {
  fontSize: 16
};

var mymenuItems = [
{ payload: '1', text: 'one' },
{ payload: '2', text: 'two' },
{ payload: '3', text: 'three' },
{ payload: '4', text: 'four' },
{ payload: '5', text: 'five' },
];


return (
  <div style={divStyle}>
    <SelectField
        value={this.state.selected}
        onChange={this._onSelect}
        floatingLabelText="Product"
        menuItems={mymenuItems}>
    </SelectField>      
  </div>

)

}

I am also getting a

Warning: Unknown props onItemTouchTap, disableAutoFocus, onEscKeyDown on tag. Remove these props from the element

in the console when I click on the SelectField but I saw others had similar issues due to new React version it and it appears people think it should not affect my code (though it is very annoying)

Upvotes: 0

Views: 7865

Answers (2)

Priyanshu Chauhan
Priyanshu Chauhan

Reputation: 5545

Try putting this in your build:

var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();

Make sure that function is ran before you render anything to page.

Reference: https://github.com/callemall/material-ui/issues/1011

Upvotes: 1

Andr&#233; Junges
Andr&#233; Junges

Reputation: 5367

Not sure why you are using menuItems, this property is from old material-ui versions.

But its simple to fix - based on your code you can just map through the array and return MenuItem elements.. Example:

<SelectField
    value={this.state.selected}
    onChange={this._onSelect}
    floatingLabelText="Product">

    {mymenuItems.map(x => <MenuItem key={x.payload} value={x.payload} primaryText={x.text} />)}
</SelectField>

I'd suggest you to check the examples on the material-ui docs http://www.material-ui.com/#/components/select-field

Upvotes: 1

Related Questions