ComboBox within TreeView

Hello, Bill,

Is it possible to share with us an example or at least the code used in this case?

Currently, the KendoReact does not have an official component representing ComboBox within TreeView, and I would like to see the code used to achieve the desired result. This will allow me to inspect it and make a suggestion best suited for it.

Regards,
Stefan
Progress Telerik

Thanks for responding. Here is a quick rough sample of what I'm seeing. It isn't totally what we're doing but you should get the idea:

https://stackblitz.com/edit/react-p3fjwm

Hello, Bill,

Thank you for the example to illustrate the use case.

Indeed the TreeView is preventing the space click as it is reserved for a different functionality.

I was able to find an approach to still handle the space key press. The approach requires a custom event listener a programmatically setting the space on the correct position:

https://stackblitz.com/edit/react-p3fjwm-ng79nb?file=app/main.jsx

I hope that this approach will prove helpful.

Regards,
Stefan
Progress Telerik

Thanks that helps a lot. Now I'm running into issues with the other keyboard navigation, like using the up and down arrows to select within the dropdown. It might be the case where I need to use something besides the tree view for what I want to accomplish.

 

Thanks again for your help.

Hello, Bill,

Than you for the additional details.

After more research we found that stopping the event propagation on the div that hold the ComboBox will prevent any of the TreeView keydown events and show not causing issues like this one:

https://stackblitz.com/edit/react-p3fjwm-xernph?file=app/main.jsx

If some of the TreeView keyboard navigation features have to be used, only call stopPropagation in some cases depending on a condition.

Regards,
Stefan
Progress Telerik

This is pretty much exactly what I was trying to do. Sometimes the most obvious solutions are the ones that don't come to you.

 

Thanks for your help!