如何将按钮添加到 MUI TextField Select 组件选择选项？

Question

I have a MUI v5 Textfield select component. Each option has a play button , avatar and option text . Everything works fine in dropdown list. But how can I make play button work (do something) if it is selected? At the moment if user clicks on it then option list opens.

const StyledSelect = ({ ...props }) => {
  return (
    <TextField {...props} select fullWidth>
      {props.children}
    </TextField>
  );
};

export const AudioSelect = () => {
  return (
    <StyledSelect>
      {AUDIO_OPTIONS.map(({ id, name, avatar, voice }) => (
        <MenuItem key={id} value={id}>
          <Stack>
            <PlayAudioButton
              sound={voice}
              key={id}
              onPlay={() => console.log("play button " + id)}
              isPlaying={false}
            />
            <Avatar src={avatar} />
            <Typography>{name}</Typography>
          </Stack>
        </MenuItem>
      ))}
    </StyledSelect>
  );
};

Here's codesandbox: https://codesandbox.io/s/silly-monad-6z3144?file=/src/AudioSelect.tsx

Answer 1

Add another propagation stopping in onMouseDown did the trick

  return (
    <IconButton
      onMouseDown={(e) => {
        e.stopPropagation();
      }}
      onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
        e.stopPropagation();
        onPlay();
      }}
    >
      {isPlaying && !isAudioEnded ? <PauseIcon /> : <PlayArrowRoundedIcon />}
    </IconButton>
  );