Hi,
when I use a DropDownList into a ReactBootstrap Modal the expanded list appears BELOW 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 PopUp component, not for the DropDownList one...
I've made a repo illustrating this issue : https://github.com/lePioo/react_kendo_dropdown_into_bootstrap_modal
2 Answers, 1 is accepted
0
Accepted
Hello, Pioo,
Thank you for the example.
I can assume that it is connected to the z-index. Please check the following issue containing a solution:
https://github.com/telerik/kendo-react/issues/45
As for the focus, Time ago there was a request in the Material UI for a feature called (TrapFocus). What this feature does is to prevent an element outside of the Dialog to get the focus. And in our case, we are rendering the list inside a Popup which is in the body element directly(outside of the Dialog). This causes the TrapFocus feature to return the focus to the Dialog, which on the other hand is firing the blur event of the Popup and the DropDown is closed.
https://github.com/mui-org/material-ui/issues/4384
https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Modal/TrapFocus.js
Regards,
Stefan
Progress Telerik
Thank you for the example.
I can assume that it is connected to the z-index. Please check the following issue containing a solution:
https://github.com/telerik/kendo-react/issues/45
As for the focus, Time ago there was a request in the Material UI for a feature called (TrapFocus). What this feature does is to prevent an element outside of the Dialog to get the focus. And in our case, we are rendering the list inside a Popup which is in the body element directly(outside of the Dialog). This causes the TrapFocus feature to return the focus to the Dialog, which on the other hand is firing the blur event of the Popup and the DropDown is closed.
https://github.com/mui-org/material-ui/issues/4384
https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Modal/TrapFocus.js
Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items
0
Pioo
Top achievements
Rank 1
Rank 1
answered on 10 May 2019, 03:51 AM
Thanks a lot, working like a charm!
Just had to add the following code to the global css
.k-animation-container{ z-index: 10003}