Dropdown closes when child option is selected

[AnneTee]

I have a <DropdownTreeSelect> component with a 3-tier hierarchy of data. I'm using this as a search filter, so onChange I'm sending the data upstream so the search can be performed. When the app re-renders, my search filter receives the selected items as props, and then I'm editing the data I'm providing to the <DropdownTreeSelect> to set the proper items as checked = true.

Everything works perfectly for top-tier parent items. However, when I open a parent item and select a child item, the dropdown immediately closes. The data flow is still working as expected, I'm just not sure why the dropdown closes. I'd like for it to stay open until the user chooses to close it. I also don't understand why it would be working for the parent items but not child items. Any idea what could be going on here?

I'll also note that when I remove my custom onChange function, the dropdown stays open no matter what items I select (but of course my search dataflow no longer works).

[mrchief]

I'm sending the data upstream so the search can be performed. When the app re-renders, my search filter receives the selected items as props, and then I'm editing the data I'm providing to the to set the proper items as checked = true.

Any reason why you're doing the manual search + setting data? The component will do this for you.

There is a prop called showDropdown which will render the component with dropdown open. But that will not solve your issue completely since the search input will get cleared if you re-render the component.

I'll also note that when I remove my custom onChange function, the dropdown stays open

Most likely you're setting state in your onChange which causes the dropdown to re-render. If the dropdown data hasn't changed, you can prevent this re-render by following the approach here: prevent-re-render-on-parent-render-hoc

[AnneTee]

Any reason why you're doing the manual search + setting data? The component will do this for you.

This component is just one search filter of many that I'm using to query a Solr instance.

Most likely you're setting state in your onChange which causes the dropdown to re-render. If the dropdown data hasn't changed, you can prevent this re-render by following the approach here: prevent-re-render-on-parent-render-hoc

The component is definitely re-rendering, but the weird part is that when a top-level item is selected, the dropdown remains open after the re-render, but when a child component is selected it immediately closes.

That said, I took your advice and prevented the component from re-rendering when the parent component renders and things are working as expected now. Thanks for your quick response and this useful component!

[mrchief]

This component is just one search filter of many that I'm using to query a Solr instance.

Very interesting use case.

but the weird part is that when a top-level item is selected, the dropdown remains open after the re-render

It's weird. The only reason I can think of is that somehow the whole component is getting re-instantiated (thus destroying state and closing the dropdown).