Пользовательское автозаполнение из примера не открывается в диалоговом окне

Question

Я пытаюсь использовать настраиваемое автозаполнение внутри диалогового окна, но оно не открывается.

Откройте окно с кодами ниже.

Вы увидите:

1. Пользовательское автозаполнение ( из официального примера do c )
2. Кнопка, открывающая диалоговое окно с другим экземпляром того же пользовательского автозаполнения.

Нажмите на «метки» 1. И вы увидите автозаполнение. Хорошо. Нажмите «Открыть», затем попробуйте открыть автозаполнение из диалогового окна. Невозможно. Не очень хорошо.

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

Я считаю, что виноват автофокус ввода (из 'renderInput').

По какой-то причине автозаполнение размывается, как только открывается, и сразу закрывается. Удаление автофокуса помогает немного, затем вы можете открыть автозаполнение, но оно исчезнет при нажатии на ввод.

Связанная закрытая проблема на github: https://github.com/mui-org/material-ui/issues/20915

Answer 1

Проблема в том, что нажатие на «Ярлыки» открывает Popper внутри Dialog. По умолчанию Dialog заставляет сосредоточиться на себе. Открытие Popper отвлекает внимание от Dialog. Когда Dialog возвращает фокус на себя, это вызывает закрытие Popper.

Добавление опоры disableEnforceFocus на Dialog устраняет проблему. Вот фиксированная версия вашей песочницы, которая включает в себя журналы консоли, которые упрощают просмотр происходящего: https://codesandbox.io/s/autocomplete-x-dialog-x-autofocus-jk0ql?file= / src / InDialog.jsx .