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.