Как диалог Material-UI позволяет взаимодействовать за диалогом?

Question

Я использую Material-UI в моем приложении React , и у меня есть Dialog, который появляется над несколькими элементами формы после нажатия кнопки.

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

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

Тем не менее, я пытаюсь выяснить, как отобразить диалоговое окно, и в то же время все еще могу редактировать элементы формы за ним.

Пример кода здесь :

Кто-нибудь знает, возможно ли отобразить диалог MaterialUI и по-прежнему иметь возможность взаимодействовать с элементами формы за диалогом (ie, когда диалог перетаскивается)?

Answer 1

Диалог предназначался для блокировки всего другого взаимодействия, чтобы пользователь мог сосредоточиться на его содержимом. Во всяком случае, я нашел одно решение, вероятно, не лучше, но работает здесь, код такой:

<Dialog
  hideBackdrop // Disable the backdrop color/image
  disableEnforceFocus // Let the user focus on elements outside the dialog
  style={{ position: 'initial' }} // This was the key point, reset the position of the dialog, so the user can interact with other elements
  disableBackdropClick // Remove the backdrop click (just to be sure)
  ...
>
  ...
</Dialog>

Вот рабочий пример