problem calling openAll()

[softmasters]

Hello, I have the following component made using react-dnd-treeview, but when I click on button with id newSkillExpandAll, the expandAll method is called, but the nodes are not expanded. Where is my mistake?
Thank you

import { DndProvider } from 'react-dnd';
// import { ITreeElement } from '../../skillData';
import './SkillTreeComponent.scss'
import { IoCaretForward, IoCaretDown } from 'react-icons/io5'
import { ISkillTreeNodeData } from '../../skillData';

export interface ISkillTreeProps {
	treeData: NodeModel<ISkillTreeNodeData>[]
	showCheckBoxes?: boolean
	checkedNodesIds?: (string | number)[]
	getDeleteIcon?: (node: NodeModel<ISkillTreeNodeData>) => JSX.Element
	onClick?: (node: NodeModel<ISkillTreeNodeData>) => void
	isCheckBoxEnabled?: (node: NodeModel<ISkillTreeNodeData>) => boolean
	onCheckBoxChange?: (node: NodeModel<ISkillTreeNodeData>, e: ChangeEvent<HTMLInputElement>) => void
	onDeleteClick?: (node: NodeModel<ISkillTreeNodeData>, e: React.MouseEvent<HTMLSpanElement>) => void
	// ref: React.ForwardedRef<TreeMethods>
}


// export type TreeRef = React.ForwardedRef<TreeMethods> & { forwardRef: React.ForwardedRef<any> };
// export type TreeRef = React.ForwardedRef<TreeMethods> & React.RefAttributes<HTMLElement>;

// type TreeRef = {
	// 	current: TreeMethods | null;
	//   } & React.RefAttributes<HTMLElement>;
	
const SkillTreeComponent = (props: ISkillTreeProps) => {
// const SkillTreeComponent = React.forwardRef<TreeMethods, ISkillTreeProps>((props: ISkillTreeProps, ref) => {
		
	const myref = useRef<TreeMethods>(null)
	const expandAll = () => {
		myref.current?.openAll()
	}
	// const treeRef = useRef<TreeMethods>(null);
	
	return (
	<div className="skillTreeComponentWrapper">
		<div className="expansionStateWrapper">
			<button id="newSkillExpandAll" title="Espandi tutti" onClick={(e) => expandAll()}>Espandi tutti 2</button>
		</div>
		<DndProvider backend={MultiBackend} options={getBackendOptions()}>
			<Tree
			ref={myref}
			tree={props.treeData}
			rootId={0}
			onDrop={() => {}}
			render={(node, { depth, isOpen, onToggle }) => (
				<div style={{ marginLeft: depth * 10 }}>
					{node.data?.hasChildren && (
						<span onClick={onToggle} className="toggleSymbol">{isOpen ? <IoCaretDown/> : <IoCaretForward/>}</span>
					)}
					{props.showCheckBoxes && <input type="checkbox" className="skillNode" name={"node"+node.id} id={"node"+node.id} data-id={node.id} checked={props.checkedNodesIds && props.checkedNodesIds.find(checkedNodeId => checkedNodeId == node.id) !== undefined} disabled={props.isCheckBoxEnabled && !props.isCheckBoxEnabled(node as NodeModel<ISkillTreeNodeData>)} onChange={e => props.onCheckBoxChange && props.onCheckBoxChange(node as NodeModel<ISkillTreeNodeData>, e)}></input>}
					{props.getDeleteIcon && (<span id={"deleteNode"+node.id} data-id={node.id} title="Elimina" onClick={e => props.onDeleteClick && props.onDeleteClick(node as NodeModel<ISkillTreeNodeData>, e)}>{props.getDeleteIcon(node as NodeModel<ISkillTreeNodeData>)}</span>)}
					<span className="nodeText" onClick={(e) => props.onClick && props.onClick(node as NodeModel<ISkillTreeNodeData>)}>{`${node.text} (id: ${node.data?.id_skill})`}</span>
				</div>
			)}  
			/>
		</DndProvider>
	</div>
	)
}

export default SkillTreeComponent

[minop1205]

@softmasters
Currently, the openAll method only applies to nodes with droppable = true, so please make sure that the target node has droppable = true.

This will be fixed as the droppable property of a node and its open/close state are inherently different.

[minop1205]

@softmasters
I published v3.4.3 today.
This version fixes the following issues

Currently, the openAll method only applies to nodes with droppable = true, so please make sure that the target node has droppable = true.

This will be fixed as the droppable property of a node and its open/close state are inherently different.

Please install the latest package and try it.

npm install @minoru/react-dnd-treeview@latest

If it still does not help, please reopen this issue.