[Hanksha]
What is needed for the tree to keep keyboard navigation functionality?
I’m guessing you want to keep the up/down arrow navigation even when a text input is focused? I never tired it but I think you’ll have to capture the events of each input text and forward it to the TreeWidget handleUp and handleDown methods.
What shape should the data presented to the render functions have?
The TreeWidget maintain the tree data in the form of TreeNode which have other extending interfaces to provide some behavior to each node like SelectableTreeNode, ExpandableTreeNode. I find it a bit cumbersome to work with tree node and prefer to use my domain models so what I did is have a generic tree node interface like this:
export interface DataTreeNode
extends CompositeTreeNode,
SelectableTreeNode,
ExpandableTreeNode {
data: any;
resolved: boolean;
}
Then I can set the tree root by building DataTreeNodes based on my domain model where I set data as my model.
You can then override the TreeWidget methods like this:
// controlling expandable state
isExpandable(node: TreeNode): node is ExpandableTreeNode {
if (DataTreeNode.is(node)) {
if (node.resolved) return node.children.length > 0;
const data = node.data
if (MyModel.is(data)) return true;
if(OtherModel.is(data) && data.myBoolean) return true;
return false;
}
return super.isExpandable(node);
}
// overriding caption
renderCaption(node: TreeNode, props: NodeProps): React.ReactNode {
if (DataTreeNode.is(node)) {
const base = super.renderCaption(node, props) as React.ReactElement;
const children: React.ReactNode[] = [base.props.children];
const data = node.data
if (MyModel.is(data)) children.push(<input type="text" />)
return <div {...base.props}>{children}</div>;
}
return super.renderCaption(node, props);
}
etc. just check which TreeWidget method you need to override.
How do I stop the stock search functionality from capturing keyboard inputs within the tree?
You have two options AFAIK, you can disable the search feature when you bind your tree like this:
createTreeContainer(parent, {
search: false
})
The other option is to rebind the SearchBoxFactory and return your own SearchBox implementation which doesn’t listen to key event when an input text is focused.
If there is a way to enable/disable the current SearchBox impl, I’m not aware of it.
