Using KendoReact DropDownList into ReactBootstrap Modal

Question

when I use a KendoReact DropDownList into a ReactBootstrap Modal the expanded list appears UNDER the modal so it can't be interacted with.

I read several issues that was pointing to a focus loss, which is not exactly my case, due to the fact that Kendo PopUp was append to body instead of the Modal itself, and the 'appendTo' prop seems to be a good solution for me but it exists only for the Kendo PopUp component, not for the Kendo DropDownList one (which uses PopUp underlying)...

I've made a repo illustrating this issue : https://github.com/lePioo/react_kendo_dropdown_into_bootstrap_modal

And a LIVE demo for this repo (take some time to load):https://react-kendo-dropdown-into-boot.herokuapp.com/

Answer 1

Set bigger z-index for the animation container of the popup using CSS. And it will be on top of the modal to resolve it.

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

Leave it to be rendered into the document. Since if you render it using appendTo to the Modal, the DropdDown will not be entirely visible when opened, or scrollbar will appear in your dialog. This is the purpose it is rendered into the document.

Answer 2

@Xizario's answer didn't work with V4.14.x

The solution that finally worked was to use ZIndexContext.Provider from '@progress/kendo-react-common':

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