react select onChange broken

[sabreurqq]

hi I am looking for google meterial design with react. when I tried select, I found it's onchange event not working could you help me to look what happened?

jsfiddle

and I very sorry for poor English. thanks

[amorey]

If you're using React you can use the MUI React library: https://www.muicss.com/docs/v1/react/forms

import React from 'react';
import ReactDOM from 'react-dom';
import Form from 'muicss/lib/react/form';
import Option from 'muicss/lib/react/option';
import Select from 'muicss/lib/react/select';

class Example extends React.Component {
  onChangeFn(ev) {
    console.log(ev.target.value);
  }

  render() {
    return (
      <Form>
        <Select defaultValue="option-2" onChange={this.onChangeFn}>
          <Option value="option-1" label="Option 1" />
          <Option value="option-2" label="Option 2" />
          <Option value="option-3" label="Option 3" />
          <Option value="option-4" label="Option 4" />
        </Select>
      </Form>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));

[jpbourgeon]

I had a similar problem: select inputs worked fine on Chrome but were broken on IE10+ I had forgotten the value attribute in my options. Chrome populates it with the label by default but other browsers like IE may not.

It might help someone...

[amorey]

@jpbourgeon Thanks for your post! Just to confirm - the onChange handler is working fine but IE10+ requires that each <Option/> element have a value attribute?

[jpbourgeon]

Yes that's it.

[amorey]

Ok, I can look into making sure the component behaves the same in IE10+.

[jpbourgeon]

Thank you. However I guess that this is not a top priority since there is a valid markup working across browsers.