Пользовательский интерфейс материала автозаполнения пользовательских закрывается при нажатии

Question

Я пытаюсь добавить кнопку в бумагу для автозаполнения пользовательского интерфейса материала, переопределив опору PaperComponent и добавив кнопку на кнопку бумаги, но нажатие на кнопку автоматически закрывает результаты поиска автозаполнения

Как я могу предотвратить автоматическое заполнение результатов поиска Бумага закрывается при нажатии

Вот песочница: https://codesandbox.io/s/material-demo-mxjyi

ОБНОВЛЕНИЕ: я не заметил, что песочница не сохранил, теперь вы можете увидеть вопрос

Answer 1

Проблема в onBlur, которая возникает перед вашим onClick. Material UI предлагает игнорировать поведение размытия в режиме debug, но это происходит, только если у вас есть значение внутри вашего Autocomplete.

Обходной путь должен использовать onMouseDown вместо onClick

Исходя из вашего Codesanbox, измените событие onClick на событие onMouseDown в вашем <button> компоненте

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

Обсуждалась проблема, не связанная с Material-UI здесь также