Styling react-select v2 with material-ui - Replace Input component

Question

I'm having an issue with replacing the Input component for react-select v2 with the Input component from Material UI.

I've made an attempt so far in the codesandbox below, but unable to invoke the filtering upon typing into the Input?

https://codesandbox.io/s/jjjwoj3yz9

Also, any feedback on the Option replacement implementation would be appreciated. Am I going about it the right way with grabbing the text of the clicked option and search for the Option object from my options list to pass to the selectOption function?

Much appreciated, Eric

Answer 1

V1

refer the documentation from here : https://material-ui.com/demos/autocomplete/

it provides clear documentation about how to use react-select with material-ui

here is a working example for your question: https://codesandbox.io/s/p9jpl9l827

as you can see material-ui Input component can take react-select as inputComponent.

V2

It's almost same as the previous approach :

implement the Input component:

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

and then SelectWrapped component implementation should be:

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

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

and I overrides the component Option and DropdownIndicator to make it more material and added customStyles also:

const customStyles = {
  control: () => ({
    display: "flex",
    alignItems: "center",
    border: 0,
    height: "auto",
    background: "transparent",
    "&:hover": {
      boxShadow: "none"
    }
  }),
  menu: () => ({
    backgroundColor: "white",
    boxShadow: "1px 2px 6px #888888", // should be changed as material-ui
    position: "absolute",
    left: 0,
    top: `calc(100% + 1px)`,
    width: "100%",
    zIndex: 2,
    maxHeight: ITEM_HEIGHT * 4.5
  }),
  menuList: () => ({
    maxHeight: ITEM_HEIGHT * 4.5,
    overflowY: "auto"
  })
};

and Option:

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>
    );
  }
}

please find the example from here: https://codesandbox.io/s/7k82j5j1qx

refer the documentation from react select and you can add more changes if you wish.

hope these will help you.