Выберите с вводом чипа, не отображая выбранное значение

Способ по умолчанию, которым Select отображает выбранное значение, заключается в отображении его дочерних элементов. В Выберите исходный код, когда он перебирает дочерние элементы Select, он делает следующее:

        selected = areEqualValues(value, child.props.value);
        if (selected && computeDisplay) {
          displaySingle = child.props.children;
        }

Это основано на предположении, что у Select есть MenuItem дети. Например, в следующем примере будет выбран первый элемент меню, а дочерним элементом этого элемента меню будет текст «Элемент 1»:

<Select value = {1}>
   <MenuItem value = {1}>Item 1</MenuItem>
   <MenuItem value = {2}>Item 2</MenuItem>
</Select>

У ваших фишек нет потомков, поэтому ничего не отображается. Вы можете настроить это поведение, указав свойство renderValue на Select. Это функция, которая получает значение и может решить, что отображать.

В следующем примере показано использование реквизита renderValue для рендеринга Chip:

import React, { useState } from "react";
import ReactDOM from "react-dom";

import FormControl from "@material-ui/core/FormControl";
import Chip from "@material-ui/core/Chip";
import Select from "@material-ui/core/Select";
import { withStyles } from "@material-ui/core/styles";

const styles = theme => ({
  formControl: {
    margin: theme.spacing.unit,
    minWidth: 120
  }
});
const chipOptions = [
  { key: 1, text: "text1", value: "text1" },
  { key: 2, text: "text2", value: "text2" },
  { key: 3, text: "text3", value: "text3" }
];

function App({ classes }) {
  const [value, setValue] = useState("text1");
  const renderChip = value => {
    return <Chip label = {value} className = {classes.chip} />;
  };
  return (
    <>
      <FormControl className = {classes.formControl}>
        <Select
          inputProps = {{
            name: "badge",
            id: "badge-simple"
          }}
          renderValue = {renderChip}
          value = {value}
          onChange = {event => {
            console.info(event.target.value);
            setValue(event.target.value);
          }}
        >
          {chipOptions &&
            chipOptions.map(option => (
              <Chip
                key = {option.value}
                label = {option.value}
                className = {classes.chip}
                value = {option.value}
              />
            ))}
        </Select>
      </FormControl>
    </>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);