Here you have a simple example that shows the issue

Reproduction steps:

Use this component:

import React from 'react'
import TreeView, { INode, flattenTree } from 'react-accessible-treeview'

function flatten<T>(arr: T[][]): T[] {
	return ([] as T[]).concat(...arr)
}

type NestedArray<T> = Array<NestedArray<T> | T>

function flattenDeep<T>(input: NestedArray<T>): T[] {
	return flatten(input.map(x => (Array.isArray(x) ? flattenDeep(x) : [x])))
}

const findParents = (data: INode[], node: INode): number[] => {
	if (!node?.parent) {
		return []
	}
	const parentNode = data?.filter(dataNode => dataNode.id === node?.parent)
	return [node.parent, ...findParents(data, parentNode[0])]
}

const folder = {
	name: '',
	children: [
		{
			name: 'Fruits',
			children: [{ name: 'Avocados' }, { name: 'Bananas' }, { name: 'Berries' }, { name: 'Oranges' }, { name: 'Pears' }],
		},
		{
			name: 'Drinks',
			children: [
				{ name: 'Apple Juice' },
				{ name: 'Chocolate' },
				{ name: 'Coffee' },
				{
					name: 'Tea',
					children: [{ name: 'Black Tea' }, { name: 'Green Tea' }, { name: 'Red Tea' }, { name: 'Matcha' }],
				},
			],
		},
		{
			name: 'Vegetables',
			children: [{ name: 'Beets' }, { name: 'Carrots' }, { name: 'Celery' }, { name: 'Lettuce' }, { name: 'Onions' }],
		},
	],
}

const data = flattenTree(folder)

export const SearchTree = () => {
	const [expandedIds, setExpandedIds] = React.useState<number[]>([])
	const [searchValue, setSearchValue] = React.useState<string>('')

	const [hiddenIds, setHiddenIds] = React.useState<number[]>([])

	const allIds = React.useMemo(() => data.map(element => element.id), [])

	React.useEffect(() => {
		if (!searchValue) {
			setHiddenIds([])
			return
		}
		// Filter elements containing part of search value
		const searchResult = data.filter(element => element.name.toLowerCase().includes(searchValue.toLowerCase()))
		// For each result, find all parents and flatten array
		const parents = flattenDeep(searchResult.map(result => findParents(data, result)))
		// Expand parents without changing the already expanded elements
		const nextExpandedIds = [...new Set([...expandedIds, ...parents]).values()]
		if (JSON.stringify(expandedIds) !== JSON.stringify(nextExpandedIds)) {
			setExpandedIds(nextExpandedIds)
		}
		const allChildren = flatten(searchResult.map(node => [...node.children]))
		const idsToShow = [...parents, ...searchResult.map(el => el.id), ...allChildren]
		setHiddenIds(allIds.filter(id => !idsToShow.includes(id)))
	}, [allIds, expandedIds, searchValue])

	return (
		<>
			<input placeholder="Enter a for example" onChange={event => setSearchValue(event?.target.value)} style={{ border: '1px solid red' }}></input>
			<TreeView
				data={data}
				expandedIds={expandedIds}
				nodeRenderer={({ element, isBranch, getNodeProps, level, handleExpand }) => {
					return (
						<div
							{...getNodeProps({ onClick: handleExpand })}
							style={{ marginLeft: 40 * (level - 1), ...(hiddenIds.includes(element.id) ? { display: 'none' } : {}) }}
						>
							{isBranch && '>'}
							<span style={{ userSelect: 'none' }}>{element.name}</span>
						</div>
					)
				}}
			/>
		</>
	)
}

You get this visual:

You press the letter "a" inside the input

Expected results

You can still type inside the input to continue the search

Actual results

The focus gets stolen by the last element that matches the search

Reproduction steps:

Expected results

Actual results

Demo

Chose whether we want focus or scrollIntoView when changing expandedIds #73

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions

Chose whether we want `focus` or `scrollIntoView` when changing expandedIds #73