TreeView with DropDownButton

[Matej]

Hi, I have a TreeView with DropDownButton in custom rows and popups opening will break if I click through different DropDownButtons . I click on a button and no popup is displayed. Any suggestion what I did wrong? https://stackblitz.com/edit/react-s6l3qq

[Matej]

here is a gif of the problem

[Stefan]

Hello, Matej,

Thank you for your example.

After in-depth research, I found the reason for this behavior.

The DropDownButton is programmed to close on blur and the TreeView has an internal logic to focus the clicked item. What is happening is that as these events fired almost instantly, sometimes the popup list is opened before the TreeView item is focused and milliseconds after that when the TreeView item is focused, causes blur on the popup and closes it. As this happens almost at the same frame, it seems that the list is never opened, but if you observe the DOM, you can see the list being rendered for a fraction of a second and then removed.

Currently, it can be resolved by stopping the event propagation on the TreeView item, this will require small modification on the styling as the div or span has different styles then <>

This is the updated example:

https://stackblitz.com/edit/react-s6l3qq-uubrlc?file=app/main.jsx

Regards,
Stefan
Progress Telerik

[Matej]

Thank you!