Feature Request: Search and Navigation

[FroeMic]

I' m submitting a request to enhance our search/filter functionality, specifically for components with a large amount of text or data where users need to quickly find and navigate specific content. Think of it like a "Find on Page" feature, but built into our components

This has three key parts that work together:

Occurrence Highlighting:
When a user types a search term into a component's dedicated search input, the component should automatically highlight all instances of that text within the displayed content. This makes the search results immediately visible and scannable.

Next/Previous Occurrence Jumps:
We need controls (e.g., small "Next" and "Previous" arrow buttons next to the search input) that allow the user to jump directly to the next or previous highlighted occurrence.

Crucially, if the occurrence is currently off-screen (due to scrolling or virtualization), the component must automatically scroll the target occurrence into view and potentially give it focus.

Programmatic Jumping (API Control):
Finally, it would be extremely helpful to have an API method that allows developers to programmatically jump to a specific location or item within the component.

For instance, if we store the index of a highlighted item in our application state, we should be able to call a function like component.scrollToIndex(42) to force that item into view. This is essential for restoring state or linking directly to a found piece of data.

Getting this implemented would be a huge win!

[vothanhdat]

Thanks for the suggestion — this is definitely on the roadmap.

I’m aiming to add:

• Search with highlight for all matches
• Next/previous navigation that works with virtualization
• An optional ref API for programmatic jumps, e.g.:

scrollToIndex(index: number)
scrollToPath(path: string[])

I’ll share a preview once the basics are ready.

[vothanhdat]

Thanks for the request—this just landed. ObjectView now ships built-in search and navigation:

• ref.current?.search(filterFn, markTerm, onResult, options) with inline highlights, plus scrollToPaths for jumping to matches (virtualization-safe).
• Floating SearchComponent UI with debounced input, next/prev controls, keyboard shortcuts, a loading indicator, and stable, memoized options (maxResult, maxDepth, iterateSize, fullSearch, normalizeSymbol).

Quick usage (correct prop names):

const ref = useRef<ObjectViewHandle>(null);

const searchOptions = useMemo(
  () => ({ maxDepth: 6, iterateSize: 200, normalizeSymbol: (s: string) => s }),
  []
);

const handleSearch = useCallback<ObjectViewHandle['search']>(
  (filterFn, markTerm, onResult, opts) =>
    ref.current?.search(filterFn, markTerm, onResult, { ...searchOptions, ...opts }),
  [searchOptions]
);

<SearchComponent
  active
  handleSearch={handleSearch}
  scrollToPaths={(paths) => ref.current?.scrollToPaths(paths)}
  options={searchOptions}
/>;

<ObjectView ref={ref} valueGetter={() => data} />;

Let me know if you need tweaks or extra APIs.