How to clear data on Select multiple when typing on another textfield using reactjs-CodePudding

This is my current code, what I want here is after selecting on Select option (CHIP) and if the user type on the textfield I want to clear what the user selected on CHIP, What should I do to get what i want functionality?

const names = [
  'Oliver Hansen',
  'Van Henry',
  'April Tucker',
];

function getStyles(name, personName, theme) {
  return {
    fontWeight:
      personName.indexOf(name) === -1
        ? theme.typography.fontWeightRegular
        : theme.typography.fontWeightMedium,
  };
}

export default function MultipleSelectChip() {
  const theme = useTheme();
  const [personName, setPersonName] = React.useState([]);

  const handleChange = (event) => {
    const {
      target: { value },
    } = event;
    setPersonName(
      // On autofill we get a stringified value.
      typeof value === 'string' ? value.split(',') : value
    );
  };

  const handleChangeTextField = (event) => {
    setPersonName(null);
  };

  return (
    <div>
      <FormControl sx={{ m: 1, width: 300 }}>
        <InputLabel id="demo-multiple-chip-label">Chip</InputLabel>
        <Select
          labelId="demo-multiple-chip-label"
          id="demo-multiple-chip"
          multiple
          value={personName}
          onChange={handleChange}
          input={<OutlinedInput id="select-multiple-chip" label="Chip" />}
          renderValue={(selected) => (
            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
              {selected.map((value) => (
                <Chip key={value} label={value} />
              ))}
            </Box>
          )}
          MenuProps={MenuProps}
        >
          {names.map((name) => (
            <MenuItem
              key={name}
              value={name}
              style={getStyles(name, personName, theme)}
            >
              {name}
            </MenuItem>
          ))}
        </Select>
        <TextField 
        variant="outlined"
        label="Type anything to remove the value of Chip"
        onChange={handleChangeTextField} />
      </FormControl>
    </div>

CodePudding user response：

I would set your textfield to be controlled (ie backed by a state variable) and add an effect hook to watch it.

When it receives a value, clear the selected names by setting personNames back to an empty array.

const [text, setText] = useState("");

useEffect(() => {
  if (text) {
    setPersonName([]);
  }
}, [text]);

const handleChangeTextField = ({ target: { value } }) => {
  setText(value);
};

<TextField
  value={text}
  variant="outlined"
  label="Type anything to remove the value of Chip"
  onChange={handleChangeTextField}
/>

You might also want to clear the text field when selecting names by adding this into handleChange...

setText("");