Stop propagation when clicking on a Autocomplete MUI component in an accordion

Question

I want to add an Autocomplete component in an AccordionSummary but when I click on it, the accordion expands and has a focus state.

I tried stopping the propagation but it doesn't work.

How can I stop the propagation so the accordion doesn't expand and doesn't have a focus state ?

Here is a reproductible example : https://codesandbox.io/s/damp-cdn-k46ut6?file=/src/App.tsx:333-349

Thanks !

Answer 1

UPDATE (10-16-23)

The focus event of the Input component was bubbling up, causing it to fire for the AccordionSummary component. Stopping propagation at the Input did the trick. See updated codesandbox.

ORIGINAL

To stop propagation on the mui Autocomplete component you'll need to override the onClick event in both the rendered Input and the Listbox Component.

<Autocomplete
  ListboxProps={{ onClick: (e) => e.stopPropagation() }}
  renderInput={(props) => 
    <TextField 
      {...props} 
      InputProps={{ 
        ...props.InputProps 
        onClick: (e) => e.stopPropagation(),
        onFocus: (e) => e.stopPropagation(), // Added with update
      }} 
    />
  }
/>

For more information on the Autocomplete API, see the Autocomplete documentation.