React-final-form: Material-UI 1.2: Select with Final-Form

[LucienBouletRoblin]

I tried to use Final-Form with the Select component from Material-UI 1.2.3 but couldn't make it work.

Could you share an example of such form? Thank a lot!

[BigBuckBunny]

Hi,
here's a gist with what works for me using 'final-form-material-ui'

https://gist.github.com/BigBuckBunny/55fcc07d78c13bab3df9ab589d721e51

Pierre

[LucienBouletRoblin]

Thanks! I couldn't have a look earlier but below is an example inspired from final-form-material-ui:

import React from "react";
import Select from "@material-ui/core/Select";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import FormHelperText from "@material-ui/core/FormHelperText";

const SelectInput = ({
  input: { name, value, onChange, ...restInput },
  meta,
  label,
  formControlProps,
  ...rest
}) => {
  return (
    <FormControl
      {...formControlProps}
      error={showError}
      style={{
        minWidth: "100%"
      }}
    >
      <InputLabel htmlFor={name}>{label}</InputLabel>
      <Select
        {...rest}
        name={name}
        onChange={onChange}
        inputProps={restInput}
        value={value}
      />
      {meta.error && (
        <FormHelperText>{meta.error}</FormHelperText>
      )}
    </FormControl>
  );
};

export default SelectInput;

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.