使用KendoReact DropDownList进入ReactBootstrap模态

Question

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

我读到一些问题，这些问题都指向焦点损失，这不完全是我的情况，因为Kendo PopUp是附加在主体上而不是Modal本身，而'appendTo'道具似乎是一个好选择解决方案对我来说，但它仅适用于Kendo PopUp组件，而不适用于Kendo DropDownList组件（使用底层PopUp）...

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

此回购的LIVE演示（需要一些时间来加载）：https://react-kendo-dropdown-into-boot.herokuapp.com/

Answer 1

使用CSS为弹出窗口的动画容器设置更大的z-index。它将是解决该问题的最重要的方法。

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

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