javascript - Material UI 多选中的可删除芯片

Question

Material UI 文档包括一个 multiple select 的示例。使用 Chip 呈现所选选项的位置组件使用 renderValue支持Select . Select 的标准行为组件是单击当前值会打开选项列表。
我正在尝试对此进行调整，以便 Chip显示X按钮，然后单击 X应该立即从选择中删除该项目，而不是打开选项列表。
这似乎很容易，但我无法获得 onDelete Chip 的事件开火。点击X仍然只是打开Select .
我怎样才能得到 onDelete事件优先？根据我对事件冒泡的了解，它似乎是 Chip应该先处理事件。
Code Sandbox Demo
代码:

const MultipleSelectDemo = () => {
  const [personName, setPersonName] = React.useState<string[]>(initialSelected);

  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
    setPersonName(event.target.value as string[]);
  };
  
  // this never gets called
  const handleDelete = (e: React.MouseEvent, value: string) => {
    e.preventDefault();
    console.log("clicked delete");
    setPersonName((current) => _without(current, value));
  };

  return (
      <div>
        <FormControl>
          <InputLabel id="demo-mutiple-chip-checkbox-label">
            Chip + Check
          </InputLabel>
          <Select
            labelId="demo-mutiple-chip-checkbox-label"
            id="demo-mutiple-chip-checkbox"
            multiple
            value={personName}
            onChange={handleChange}
            onOpen={() => console.log("select opened")}
            IconComponent={KeyboardArrowDownIcon}
            renderValue={(selected) => (
              <div>
                {(selected as string[]).map((value) => (
                  <Chip
                    key={value}
                    label={value}
                    clickable
                    className={classes.chip}
                    onDelete={(e) => handleDelete(e, value)}
                    onClick={() => console.log("clicked chip")}
                  />
                ))}
              </div>
            )}
          >
            {names.map((name) => (
              <MenuItem key={name} value={name}>
                <Checkbox checked={personName.includes(name)} />
                <ListItemText primary={name} />
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      </div>
  );
}

Answer 1

Select的开通由 mouse-down event 触发-- 不是点击事件。
当鼠标按下事件发生在 Chip 的删除图标上时，您可以通过停止传播鼠标事件来获得所需的行为。 :

                  <Chip
                    key={value}
                    label={value}
                    clickable
                    deleteIcon={
                      <CancelIcon
                        onMouseDown={(event) => event.stopPropagation()}
                      />
                    }
                    className={classes.chip}
                    onDelete={(e) => handleDelete(e, value)}
                    onClick={() => console.log("clicked chip")}
                  />