SelectField can't open.

[blankzust]

Problem description

I can't open the SelectField,that is it is not useful to click SelectField.But My code is just referred to http://www.material-ui.com/#/components/select-field
Could you give me some suggestions?

Steps to reproduce

1.I write a div that contains a SelectField

<div>
         <SelectField
                            floatingLabelText="sex"
                            value={this.props.pageData.newUser == undefined?"1":this.props.pageData.newUser.sex}
                            onChange={(event, index, value) => {
                                let tempPageData = this.props.pageData;
                                tempPageData.newUser.sex = value;
                                this.props.changePageData(tempPageData);
                            }}
                        >
                            <MenuItem value="1" primaryText="man"/>
                            <MenuItem value="2" primaryText="woman"/>
                        </SelectField>
 </div>

The default value of SelectField is "1"
2.The Page shows as follows:

Versions

• Material-UI: ^0.15.0
• React: ^15.0.1
• Browser: google cherome

[blankzust]

The console shows no error.

[blankzust]

@mbrookes I use npm install material-ui to install material-ui.I have already use TextField And Manu,so it seems that I have already install material-ui correctly

[blankzust]

[Autopilot9369]

how did you solve this issue? I have having the same problem

[jackmoore]

Had the same problem, resolved it by installing react-tap-event-plugin

[Autopilot9369]

it doesn't work for me. i tried everything.. on setting showImmediately = {true} the menu shows but on click on any option, nothing works. and without showImmediately, on clicking the select field, nothing works..

[blankzust]

import injectTapEventPlugin from "react-tap-event-plugin";
injectTapEventPlugin();

try it @subhamagr

[Autopilot9369]

import React, { Component } from 'react';
import { MenuItem , SelectField } from 'material-ui'
import injectTapEventPlugin from "react-tap-event-plugin";

injectTapEventPlugin();


class MySelectField extends Component {
    constructor (props) {
        super(props);
        this._handleChange = this._handleChange.bind(this);
        this.state = {
            value: 1
        }
    }

    _handleChange (event, target, value) {
        console.log(event, target, value);
        this.setState({ value })
    }

    render () {
       return (
           <SelectField value={this.state.value} onChange={this._handleChange}>
                    <MenuItem value={1} primaryText="Never" />
                    <MenuItem value={2} primaryText="Every Night" />
                    <MenuItem value={3} primaryText="Weeknights" />
                    <MenuItem value={4} primaryText="Weekends" />
                    <MenuItem value={5} primaryText="Weekly" />
          </SelectField>
       )
  }
}

Nothing works at all.

[blankzust]

Sorry, I don't know.I solved it by this this way.Maybe you can @mbrookes. @subhamagr But I know your misery because I have spent a lot of time on it.

[Autopilot9369]

yes i am stuck on it since 2 days! the click event doesn't fire at all. I don't know what to do. Not only this, the DropDown, PopOver and all nothing works!

[mbrookes]

Closing as this is not a Material-UI issue.

@subhamagr Please use gitter / SO if you're still having problems after installing react-tap-event-plugin and adding it to your top level module.

[timscott]

The solution for me was to upgrade React. I upgraded to 15.1.0 but I suspect ^15.0.0 will do the trick.

[safouman]

@subhamagr did u fix it ?

[Autopilot9369]

@safouman yes, I solved it by upgrading react version to 15.1.0. If that doesn't work out for you, check the dependencies of material-ui and upgrade/install accordingly.