Custom autocomplete from example won't open in a dialog

2
votes

I am trying to use a custom autocomplete inside a dialog, but it the autocomplete wont open.

Open the codesandbox below.

You'll see:

  1. A custom autocomplete (from official doc's example )
  2. A button that opens a dialog, with another instance of the same custom autocomplete.

Click on "labels" of 1. And you see the autocomplete. Good. Click on "Open" then try to open the autocomplete from the dialog. Impossible. Not Good.

https://codesandbox.io/s/autocomplete-x-dialog-x-autofocus-758fn?file=/src/GitHubLabel.tsx

I believe the culprit is the input's autofocus (from 'renderInput').

For some reason, the autocomplete blurs as soon as it opens, and closes immediatly. Removing the autofocus helps just a bit, you can then open the autocomplete, but it will disappear when clicking the input.

Related closed issue on github: https://github.com/mui-org/material-ui/issues/20915

1
reactjsmaterial-ui

1 Answers

2
votes

The issue is that clicking on "Labels" is opening a Popper within a Dialog. By default, Dialog enforces keeping focus on itself. Opening the Popper is taking focus away from the Dialog. When Dialog brings focus back on itself, it is causing the Popper to close.

Adding the disableEnforceFocus prop on the Dialog fixes the problem. Here is a fixed version of your sandbox that includes some console logs that make it easier to see what is happening: https://codesandbox.io/s/autocomplete-x-dialog-x-autofocus-jk0ql?file=/src/InDialog.jsx.