reactjsmaterial-uimui-autocomplete

Material UI autocomplete popper custom closes on click

I am trying to add a button to the Material UI autocomplete paper by overriding the PaperComponent prop and added a button at the button of the paper, but clicking on the button automatically closes the autocomplete search results

How can i prevent the autocomplete search results Paper from closing on click

Here is a sandbox: https://codesandbox.io/s/material-demo-mxjyi

UPDATE: I didn't notice that the sandbox did not save, now you can see the issue

Solution

  • The problem is the onBlur which occurs before your onClick. Material UI offers to ignore the blur behaviour on debug mode but that happens only if you have a value inside your Autocomplete.

    The workaround is to use onMouseDown instead of onClick

    Based on your Codesanbox please change the onClick event to onMouseDown event in your <button> component

    <button
   style={{ margin: "10px", padding: "5px" }}
   onMouseDown={() => alert("clicked")}
>

    The problem, which is not Material-UI related, was discussed here also