[FormsySelect] "menuItems" property of "SelectField" and "DropDownMenu" has been deprecated

[danielbayerlein]

I've some problems with the FormsySelect component. When I use the example code from your readme, i get the following deprecated warnings:

Warning: "menuItems" property of "SelectField" has been deprecated.
to promote composability.

Warning: "menuItems" property of "DropDownMenu" has been deprecated.
Instead, use composability.

When I use the example from the Select Field component, it doesn't work. I think the problem is the onChange property (#27).

Example code:

<FormsySelect
    name="salutation"
    floatingLabelText="Salutation"
    onChange={this._changeSalutation}
    required
    style={{ textAlign: 'left' }}
    tabIndex={1}
    value={this.state.salutation}
>
    {salutationList}
</FormsySelect>

Extract from package.json:

"dependencies": {
    "formsy-material-ui": "^0.3.4",
    "formsy-react": "^0.17.0",
    "material-ui": "^0.14.2",
}

Thanks for your help.

[mbrookes]

Yeah, thanks for opening the issue - I've been meaning to look at this. Material-UI is undergoing a lot of changes, and it's hard to keep up!

Feel free to submit a PR if you're able to get to the bottom of it.

[jmsherry]

I think it's still present in the example code:
https://github.com/mbrookes/formsy-material-ui/blob/master/examples/webpack-example/src/app/Main.js#L100

[advance512]

So, any update on this? A year or so has gone by, and still there is no clear-cut way on how to use formsy-material-ui's Select and whether menuItems is relevant, and what selectFieldItems is.

[josedesousa]

@advance512 Was having a similar issue. Not sure about menuItems, but I get FormsySelect to work by including 'react-tap-event-plugin', as seen in example:

https://github.com/mbrookes/formsy-material-ui/blob/master/examples/webpack-example/src/app/app.js

[advance512]

I gave up and used redux-form-material-ui instead.

[Dwardmr]

If anything, I know this is not directly related to the issue but it may come in handy, while handling the onChange prop for FormsySelect (in this case I'm implementing a multiple FormsySelect but it should work the same way without the multiple), on the callback function the values being parsed from the FormsySelect are passed via index instead of value. Different as to what is shown in the Material UI docs for SelectField.

constructor(){
  super();
  this.state = {
    currentValues: [1,2];
  }
}

handleChange = (event, index, value) => {
  this.setState({currentValues: index});
}

render(){
  return(
    <FormsySelect 
      multiple={true}
      onChange={this.handleChange}
      value={this.state.values} 
    >
      {itemsList}
    </FormsySelect>
  );
}