lukasbach / react-complex-tree

Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop
https://rct.lukasbach.com
MIT License
982 stars 82 forks source link

Control search term #159

Closed LukeDefeo closed 1 year ago

LukeDefeo commented 2 years ago

Is your feature request related to a problem? Please describe. I would like to present a search custom search input outside the tree managed by myself. Additionally i would like to programatically set the search term via props in some other situations (restoring state after application is resumed).

Describe the solution you'd like Introduce the ability to control the search term, either in controlled tree environment or on the ref. I would have thought that controlled tree environment would be the appropriate place but I haven't used the library for long

Describe alternatives you've considered I could hack the render search input props to render outside of the tree somehow but this feels wrong. I could also implement search myself but having a custom item and managing the state for search and highlighting myself

Additional context None, great library BTW, I have enjoyed using it so far

lukasbach commented 2 years ago

Hi, thanks for your feedback :)

If you just want to control the search state from outside, you can already do that via the ref from the tree. Note that the search state lives within a tree, not a tree environment, so you need to grab the ref from the tree component, not the environment. You can set the current search value with treeRef.setSearch(), or close the search by invoking it with null.

If you would also like to not show the included search bar, you can update the renderSearchInput prop to () => null.

Alternatively you could also adjust renderSearchInput to render a portal that mounts the search input in a different location within your place, and customize how the search bar looks like from there.

lukasbach commented 1 year ago

@LukeDefeo I'll close this for now. Please let me know if you continue to have issues with this or see something else that is not working.