У меня есть диалоговое окно и ListItem, который при нажатии на него переходит в режим редактирования, показывая Popover. Это работало в более старой версии MUI с использованием модального режима, но с тех пор, как я установил последнюю версию, которая не работала, и я пытаюсь использовать Popover. Я попытался сделать простой пример на CodeSandox, но это работает. Что происходит, так это то, что Popover всегда находится в верхнем левом углу страницы вместо ListItem.
Я упростил свой код до простой кнопки и Popover в диалоге, и у меня все еще остается та же проблема, и у меня закончилисьидеи о том, что попробовать дальше. Ошибка, которую я получаю в консоли:
[Warning] Material-UI: the `anchorEl` prop provided to the component is invalid.
The anchor element should be part of the document layout.
Make sure the element is present in the document or that it's not display none.
. При щелчке элемента я выполняю event.currentTarget, как в примерах, и именно так выглядит console.log.
[Log] <button class="MuiButtonBase-root MuiButton-root MuiButton-text" tabindex="0" type="button"> (main.chunk.js, line 26437)
<span class="MuiButton-label">Click Me</span>
<span class="MuiTouchRipple-root">
<span class="MuiTouchRipple-ripple MuiTouchRipple-rippleVisible" style="width: 117.2006825918689px; height: 117.2006825918689px; top: -34.60034129593445px; left: -25.60034129593445px;">
<span class="MuiTouchRipple-child MuiTouchRipple-childLeaving"></span>
</span>
</span>
</button>
Я даже пытался сделать disablePortal в диалоге, но это не помогло. Я также попытался использовать ссылки, которые исправили предупреждение anchorEl, но по-прежнему отображаются относительно страницы, а не элемента. Есть идеи?