javascript - 使用 KendoReact DropDownList 进入 ReactBootstrap 模态

Question

当我在 ReactBootstrap 模态中使用KendoReact DropDownList时，扩展列表出现在模态下，因此无法与之交互。

我阅读了几个指向焦点丢失的问题，这不完全是我的情况，因为 Kendo PopUp 是附加到 body 而不是 Modal 本身，并且 'appendTo' 道具对我来说似乎是一个很好的解决方案但它只存在于 Kendo PopUp 组件，而不是 Kendo DropDownList 之一（它使用 PopUp 底层）......

我做了一个说明这个问题的回购：https ://github.com/lePioo/react_kendo_dropdown_into_bootstrap_modal

还有这个 repo 的 LIVE 演示（需要一些时间来加载）：https ://react-kendo-dropdown-into-boot.herokuapp.com/

Answer 1

使用 CSS 为弹出窗口的动画容器设置更大的 z-index。它将在模式之上解决它。

.k-animation-container{
    z-index: 10000
  }

让它呈现到文档中。因为如果您使用 appendTo 将其渲染到 Modal，则 DropdDown 在打开时将不会完全可见，或者滚动条将出现在您的对话框中。这是将其呈现到文档中的目的。