在 ReactBootstrap Modal 中使用 KendoReact DropDownList

Question

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

我阅读了几个指向焦点丢失的问题，这不完全是我的情况，因为 Kendo PopUp 是附加到 body 而不是 Modal 本身，并且 '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 在打开时将不会完全可见，或者滚动条会出现在你的对话框中。这是将其呈现到文档中的目的。

Answer 2

不适用于 V4。14.x

最终有效的解决方案是使用来自“@progress/kendo-react-common”的ZIndexContext.Provider:

<ZIndexContext.Provider value={10003}>
   <DropDownList {...yourProps} />
</ZIndexContext.Provider

在 ReactBootstrap Modal 中使用 KendoReact DropDownList

Using KendoReact DropDownList into ReactBootstrap Modal

javascript

reactjs

react-bootstrap

kendo-react-ui