Rendering multi selected nodes in Electron app

[ben-hearn-sb]

Hello!

First off, really great tree lib its very straightforward to use especially with the data setup!

I am having an issue with rendering my (multi) selected nodes however and was hoping you could help.

Issue explained: When I multi select my tree nodes, the last item clicked is the only node that renders as a selected item. I thought that the multi-select was turned off but after some digging and some logging to the console using onSelect it appears that the nodes in question are in fact selected.

I took a look at some examples online (this specifically: https://codesandbox.io/p/sandbox/angry-turing-lljvq9?file=%2Fsrc%2Fcomponents%2FNode.js) to see if I had missed something or have implemented it wrong.

I stripped the tree down to its absolute bare minimum to render some test data and found that the selection is happening on the css chunk for "treeitem: focus-within" and nodeSelected is never being used like in the example.

I also considered that it could be an issue with the component lib I use for other components (Mantine) but I stripped any reference of Mantine or any other component lib from the app for this testing branch and no change.

Is this an issue with my implementation or an issue with it being inside an Electron based app perhaps?

Would be great to get some eyes on this as I would love to continue to use and support the Arborist tree component! :)

I have left the code below for reference:

Tree itself

import React, {useRef} from "react";
import {NodeApi, Tree} from "react-arborist";
import Node from "./Node";
import {TreeNodeData} from "../../../backend/core/types";

const testData: TreeNodeData[] = [
    {
        id: '0',
        name: 'test',
        fullPath: 'blah',
        type: 'dir',
    },
    {
        id: '1',
        name: 'test2',
        fullPath: 'blah2',
        type: 'dir',
    },
    {
        id: '2',
        name: 'test3',
        fullPath: 'blah2',
        type: 'dir',
    },
]

const Arborist = () => {
    const treeRef = useRef(null)

    function onSelect(nodes: NodeApi[]) {
        for (const n of nodes) {
            //n.focus()
            // console.log(n.data.name, n.isFocused)
            console.log(n.data.name, n.isSelected)
        }
    }

    return (
            <div>
                <div >
                    <Tree ref={treeRef}
                          data={testData}
                          width={250}
                          height={250}
                          rowHeight={25}
                          onSelect={onSelect}>
                        {Node}
                    </Tree>
                </div>
            </div>
    );
}

export default Arborist;

The Node

import React from "react";
import {NodeRendererProps} from "react-arborist";
import "./styles.module.css"

const Node = ({node, style, dragHandle, tree}: NodeRendererProps<any>) => {
    return (
            <div className={`node-container ${node.state.isSelected ? "isSelected" : ""}`}
                 style={style}
                 ref={dragHandle}>
                <div
                        className={"node-content"}
                        onClick={() => {
                            node.isInternal && node.toggle()
                        }}>

                <span className="node-text">
                    <span>
                        {node.data.name}
                    </span>
                </span>
                </div>
            </div>
    );
}

export default Node;

The CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body,
:root {
    height: 100%;
    line-height: 25px;
}

.app-container {
    display: flex;
    gap: 8px;
    background-color: #151515;
    color: #999999;
    min-height: 100vh;
    overflow-x: auto;
}

/* Arborist component */

.node-container,
.node-content {
    display: flex;
    height: 100%;
    align-items: center;
    width: 100%;
}

.node-content {
    cursor: pointer;
}

.node-content span.arrow {
    width: 20px;
    font-size: 20px;
    display: flex;
}

.node-content span.node-text {
    flex: 1;
}

[role="treeitem"]:hover {
    background-color: orange;
    color: white;
}

[role="treeitem"]:focus-within {
    background-color: red;
    color: white;
}

/* Selected node */

.node-container.isSelected {
    background-color: green;
    color: yellow;
    outline: none;
}

/* Right side content */
.content {
    flex: 1;
    padding: 32px;
}

.content ul {
    list-style: none;
}

.content ul li:nth-child(2),
.content ul li:nth-child(3) {
    margin-bottom: 1rem;
}

.content ul li:nth-child(3) {
    color: white;
    font-weight: bold;
}