Custom search term to be passed as prop

[shubhamk54]

Is there a way to pass the search term to the component like:

<DropdownTreeSelect searchTerm={'Some Name'} />

So the data list will be filtered based on the custom search text which component will receive as a prop.

[mrchief]

What is the use case here - you'd be setting setting term outside and use the component to display filtered results only?

If that's the case, you can do that using an HoC. The default searchPredicate is a simply indexOf search:

return node.customData && node.customData.toLower().indexOf(searchTerm) >= 0

So you can use composition to create a HoC that:

• accepts data, searchTerm
• filters data based on the searchTerm
• assigns filteredData to the component
• set showDropdown="initial" so that it opens up the dropdown on initial render

[gandhis1]

So the use case I have now is that I re-render the entire component based on user input (essentially modifying the data property). However when these changes occur I do not want to reset the search state. Currently there does not appear to be a property I can pass the current search state to.

I have actually been using this component a LOT over the past month and while it's really good, I find myself consistently battling with the fact that the component has limited built-in functionality. I have a several-hundred line HOC that controls things like how measures are selected, storing the selections, node toggling, and more. But the end result is that I have to always trigger a re-render (by passing a new data value) to propagate my customizations. This can sometimes be sluggish in development mode, although when deployed it's not so bad. The solution provided in the docs suggest using useMemo, but if your data changes, as it would in any non-trivial HOC, then that solution doesn't really work.

[mrchief]

I hear ya. So basically a prop like initialSearchTerm that

• initializes the component,
• immediately performs a search,
• filters nodes
• renders the dropdown with the search nodes only

right? I think it should be doable without too much of a hassle. Hesitant to add yet another property but I can see this being handy in forms etc. so probably worth the cost. Interested in a PR?

[gandhis1]

Yep, I can try to tackle a PR at some point. In addition to a initialSearchTerm property, I think there should be a callback available so higher-level components can keep track of the search state - e.g. onSearchTermChange.