How to keep option list open when option's button clicked in MUI v5 Autocomplete?-CodePudding

How can I add a play button to every option in MUI v5 Autocomplete component so that when clicked on that button no option selected and option list was not closed?

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

  <Autocomplete
    disableCloseOnSelect={disableCloseOnSelect}
    options={options}
    getOptionLabel={(option: any) => option[optionLabel]}
    isOptionEqualToValue={(option: any, value: any) => option.id === value.id}
    renderInput={(params) => {
      return <TextField {...params} placeholder={placeholder} />;
    }}
    PaperComponent={AutocompletePaper}
    renderOption={(renderProps, option: any, { selected, inputValue }) => {
      return (
        <span {...renderProps}>
          <Stack>
            <PlayArrowRoundedIcon onClick={() => console.log('clicked')} />

            <StyledAvatar src={option.avatar} />
            <span>
              {option.name}
            </span>
          </Stack>
        </span>
      );
    }}
  />

CodePudding user response：

use stopPropagation for it:

<PlayArrowRoundedIcon
   onClick={(e) => { 
     e.stopPropagation()
     console.log("click on play button")
   }}
/>