javascript - 在 ReactBootstrap Modal 中使用 KendoReact DropDownList

Question

当我使用KendoReact DropDownList时进入ReactBootstrap Modal展开的列表出现在模式下，因此无法与之交互。

我读到了几个指向焦点丢失的问题，这不完全是我的情况，因为 Kendo PopUp 是附加到正文而不是模态本身，并且“appendTo” Prop 似乎是一个很好的选择对我来说是解决方案，但它仅适用于 Kendo PopUp 组件，不适用于 Kendo DropDownList 组件(它使用 PopUp 底层)...

我已经制作了一个说明此问题的存储库:https://github.com/lePioo/react_kendo_dropdown_into_bootstrap_modal

还有此存储库的实时演示(需要一些时间加载):https://react-kendo-dropdown-into-boot.herokuapp.com/

Answer 1

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

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

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