MUI-react-select-fuckup.js

const styles = theme => ({
  root: {
    flexGrow: 1,
    height: 250,
  },
  input: {
    display: 'flex',
    padding: 0,
  },
  valueContainer: {
    display: 'flex',
    flexWrap: 'wrap',
    flex: 1,
    alignItems: 'center',
    overflow: 'hidden',
  },
  chip: {
    margin: `${theme.spacing.unit / 2}px ${theme.spacing.unit / 4}px`,
  },
  chipFocused: {
    backgroundColor: emphasize(
      theme.palette.type === 'light'
        ? theme.palette.grey[300]
        : theme.palette.grey[700],
      0.08,
    ),
  },
  noOptionsMessage: {
    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
  },
  singleValue: {
    fontSize: 16,
  },
  paper: {
    position: 'absolute',
    // zIndex: 1,
    left: 0,
    right: 0,
  },
})

const NoOptionsMessage = props => {
  return (
    <Typography
      color="textSecondary"
      className={props.selectProps.classes.noOptionsMessage}
      {...props.innerProps}
    >
      {props.children}
    </Typography>
  )
}

const inputComponent = ({ inputRef, ...props }) => {
  return <div ref={inputRef} {...props} />
}

const Control = ({ selectProps, innerRef, innerProps, children }) => {
  // TODO spread all the props or make the control transparently not a TextField
  return (
    <TextField
      fullWidth
      InputProps={{
        inputComponent,
        inputProps: {
          className: selectProps.classes.input,
          inputRef: innerRef,
          children: children,
          // ...selectProps.
          ...innerProps,
        },
      }}
      InputLabelProps={{
        shrink: !!selectProps.inputValue,
      }}
      {...selectProps.TextFieldProps}
    />
  )
}

// We rather use a `label` on the TextField
const Placeholder = () => null

const Option = props => {
  return (
    <MenuItem
      buttonRef={props.innerRef}
      selected={props.isFocused}
      component="div"
      style={{
        fontWeight: props.isSelected ? 500 : 400,
      }}
      {...props.innerProps}
    >
      {props.children}
    </MenuItem>
  )
}

const SingleValue = props => {
  return (
    <Typography
      className={props.selectProps.classes.singleValue}
      {...props.innerProps}
    >
      {props.children}
    </Typography>
  )
}

const ValueContainer = props => {
  return (
    <div className={props.selectProps.classes.valueContainer}>
      {props.children}
    </div>
  )
}

const Menu = props => {
  return (
    <Paper className={props.selectProps.classes.paper} {...props.innerProps}>
      {props.children}
    </Paper>
  )
}

const components = {
  Control,
  Menu,
  NoOptionsMessage,
  Placeholder,
  Option,
  SingleValue,
  ValueContainer,
}

class FormTextFieldWithSuggestionsImpl extends React.Component {
  static propTypes = {
    InputProps: PropTypes.object,
    options: PropTypes.arrayOf(
      PropTypes.shape({
        label: PropTypes.string.isRequired,
        value: PropTypes.string.isRequired,
      }),
    ).isRequired,
    input: PropTypes.shape({
      value: PropTypes.string.isRequired,
      onChange: PropTypes.func.isRequired,
    }).isRequired,
    TextFieldProps: PropTypes.object,
  }

  render() {
    const { InputProps, options, input, classes, ...other } = this.props

    // const adaptedInputProp = {
    //   ...input,
    //   onFocus: event => {
    //     this.setState({ isOpen: true })
    //     input.onFocus(event)
    //   },
    //   onBlur: event => {
    //     this.setState({ isOpen: false })
    //     input.onBlur(event)
    //   },
    // }

    const selectStyles = {
      input: base => ({
        ...base,
        // color: theme.palette.text.primary,
        '& input': {
          font: 'inherit',
        },
      }),
    }

    return (
      <Select
        classes={classes}
        styles={selectStyles}
        options={options}
        components={components}
        {...input}
        inputValue={input.value}
        onBlur={() => {
          input.onBlur(input.value)
        }}
        onChange={(option, { action }) => {
          console.log(option, action)
          if (
            action === 'select-option' ||
            // action === 'set-value' ||
            action === 'clear'
          ) {
            input.onChange(option.value)
          }
        }}
        onInputChange={(value, { action }) => {
          console.log(value, action)
          if (action === 'set-value' || action === 'input-change') {
            input.onChange(value)
          }
        }}
        {...other}
      />
      // <Fragment>
      //   <FormTextField
      //     InputProps={{
      //       inputRef: this.popperNode,
      //       ...InputProps,
      //     }}
      //     input={adaptedInputProp}
      //     {...other}
      //   />
      //   <Menu
      //     open={isOpen}
      //     anchorEl={this.popperNode.current}
      //     anchorOrigin={{
      //       vertical: 'bottom',
      //       horizontal: 'center',
      //     }}
      //     transformOrigin={{
      //       vertical: 'top',
      //       horizontal: 'center',
      //     }}
      //     disableAutoFocusItem
      //   >
      //     {suggestions.map(suggestion => (
      //       <MenuItem
      //         key={suggestion}
      //         selected={highlightedSuggestion === suggestion}
      //         style={{
      //           fontWeight: highlightedSuggestion === suggestion ? 500 : 400,
      //         }}
      //         onClick={() => {
      //           this.setState({ isOpen: false })
      //           input.onChange(suggestion)
      //         }}
      //       >
      //         {suggestion}
      //       </MenuItem>
      //     ))}
      //   </Menu>
      // </Fragment>
    )
  }
}

const FormTextFieldWithSuggestions = withStyles(styles)(
  FormTextFieldWithSuggestionsImpl,
)