Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reposition the Search input and make it permanent without having to use custom RenderSearchInput #383

Open
coreymunn3 opened this issue May 31, 2024 · 1 comment
Assignees

Comments

@coreymunn3
Copy link

Is your feature request related to a problem? Please describe.
The search input bar does not follow best practices for user input. The search bar is impermanent and displays at the bottom of the tree, which is not guaranteed to be in view when the user begins typing. Because it is impermanent the user is not aware of the existence of search functionality without being explicitly told so and this can create bad experiences.

Describe the solution you'd like
I'd like to be able to make the search input permanently displaying (i.e. you don't have to start typing for it to show up, it just always is visible to the user) and I'd like to be able to position it at the top of tree, rather than the bottom.

Describe alternatives you've considered
I could use the renderSearchInput for this, but when you do so you lose all in-built search functionality and have to program it yourself. Feels like alot of work when All I really want is to change the display settings of the existing input. At least, that's my perspective as of now, please inform if there's a better option for my use case.

Additional context
N/a

@lukasbach
Copy link
Owner

The reason why I built the search how I did, is mostly motivated by how tree searches work in some IDEs like IntelliJ:

rct-search-motivation

They fulfill the accessibility requirement that, when starting to enter a key, the focus should jump to the visible item that starts with that key, and ideally continuing to enter keys should refine the focus. The input is not shown by default, because it's not always desired in all use cases and the primary use case is really just a "quickly jump to item x".

  • I want the search to behave completely different

It's actually not that complicated to build a custom search on top of RCT. The built-in search only searches visible items, so childs of opened folders, here is an example for a custom implementation for a searching hidden items with a seperate search input:

https://rct.lukasbach.com/storybook/?path=/story/core-finding-items--custom-finder
Source code: https://github.com/lukasbach/react-complex-tree/blob/main/packages/core/src/stories/FindingItems.stories.tsx

  • I just want to reposition the input
    Technically the input is already displayed at the top of the tree. It's inserted in the DOM below, but visually overlayed at the top left of the tree, similar to how IntelliJ does it. If you use custom CSS, you may have to add this part yourself. If you want to change the location in DOM where it is rendered, there is no easy way to do this manually, but you could use a React Portal to render the search input somewhere else.

  • I want the search input to always be visible
    Again, there is no easy option for this, but this should be doable with some hacks. The search input is rendered whenever the search value is not null, which it is by default. You can set the search value to an empty string instead of null with treeRef.setSearch(""). Remove the keyboard bindings for "abortSearch". In your renderSearchInput implementation, overwrite the onBlur handler with something new after what ...inputProps provides to the input. I believe that should suffice.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants