React-select: custom Control does not render select components

Question

Working with react-select@next and following the example here for custom Control components does not give the expected result.

import TextField from "@material-ui/core/TextField";
import Select from "react-select";

const InputComponent = (props) => {
    return (
        <TextField {...props} />
    );
};

export const MaterialSelect = (props) => {
    const { suggestions, ...other } = props;
    return (
            <Select
                options={suggestions}
                components={{
                    Control: InputComponent,
                }}
                {...other}
            />
    );
};

const suggestions = [
    {
        label: "Test One",
        value: "testOne",
    },
    {
        label: "Test Two",
        value: "testTwo",
    },
];

<MaterialSelect suggestions={suggestions} />

Using the Material-UI TextField does not open the dropdown or display any of the adornments. I also tried passing in {...props.selectProps} instead of {...props} to the TextField with no luck

I also tried passing the components in individually using the InputProps prop for TextField with no luck. Using menuIsOpen on my Select component renders the menu as expected, however typing in to the TextField produces no results, no adornments, etc.

Answer 1

It seems you are struggling to make react select looks like material. assuming that I can give you an example:

first you need to implement your Options looks like material:

class Option extends React.Component {
  handleClick = event => {
    this.props.selectOption(this.props.data, event);
  };

  render() {
    const { children, isFocused, isSelected, onFocus } = this.props;
    console.log(this.props);
    return (
      <MenuItem
        onFocus={onFocus}
        selected={isFocused}
        onClick={this.handleClick}
        component="div"
        style={{
          fontWeight: isSelected ? 500 : 400
        }}
      >
        {children}
      </MenuItem>
    );
  }
}

then you need to wrap react-select and put is as a inputComponent prop in material-ui Input.

function SelectWrapped(props) {
  const { classes, ...other } = props;

  return (
    <Select
      components={{
        Option: Option,
        DropdownIndicator: ArrowDropDownIcon
      }}
      styles={customStyles}
      isClearable={true}
      {...other}
    />
  );
}

then use it as:

 <div className={classes.root}>
    <Input
      fullWidth
      inputComponent={SelectWrapped}
      value={this.state.value}
      onChange={this.handleChange}
      placeholder="Search your values"
      id="react-select-single"
      inputProps={{
        options: testOptions
      }}
    />
  </div>

please fins that I have passes the options as inputProps in the example.

here is a working example: https://codesandbox.io/s/nk2mkvx92p

please find these customStyles in the demo which make more material feel in your component.

hope this will you.