onSelect & onNodeSelect's element is not the element that was selected

[megbailey]

Describe the bug On Event, onSelect and onNodeSelect does not return the element that was selected, but returns the last selected parent element? Happy to make any changes but I'll likely need some direction if possible.

Code That Causes The Issue Here is my implementation. I still unsure what would need to change upstream but I'll update the ticket as I learn more.

<TreeView
            className={"c-list--ul"}
            data={flattenedTreeItems}
            expandedIds={expandedIds}
            onExpand={allowMultipleExpanded ? null : oneNodeExpansion}
            onNodeSelect={ (event ) => { 
                console.log(event) // Here! event.element is always a parent element and not the element i would expect.
                //const { url, openNewTab } = event.element.metadata
                //if ( openNewTab ) window.open(url);
                //else window.location = url;
            }}
            nodeRenderer={({
                element,  
                isBranch,
                isExpanded,
                getNodeProps,
                level,
                handleExpand,
                treeState,
            }) => {

                const { name:text, metadata } = element
                const { icon, url, ...otherItemProps } = metadata

                    return (
                        <div    
                            {...getNodeProps({ onClick: handleExpand })}
                            className={"c-list__item"}
                            tabIndex={-1}
                        >
                            <Button
                                {...otherItemProps} 
                                {...other}
                                className={clsx(
                                    {
                                        ['c-btn--has-icon']: icon,
                                    },
                                )}

                                href={url}
                                layout="block"
                                text={text}
                            ></Button>
                            {( isBranch && isExpanded ) && (
                                <Icon name='circle-minus' size='small' theme={active ? 'solid' : 'regular'} color={ active ? 'dark-blue': 'light-blue'} />
                            )}
                            {( isBranch && !isExpanded ) && (
                                <Icon name='plus-circle' size='small' theme={active ? 'solid' : 'regular'} color={ active ? 'dark-blue': 'light-blue'} />
                            )}
                        </div>
                    );

            }}
        />

To Reproduce Steps to reproduce the behavior:

1. Populate tree with buttons
2. Tab past the first node
3. Select Enter
4. console.log of event shows that element is always the first element in the tree

Expected behavior onSelect({element, isBranch, isExpanded, isSelected, isHalfSelected, isDisabled, treeState }) onNodeSelect({element, isBranch, isSelected, treeState }) I would expect element to return the attributes of the node that was selected/unselected

Desktop (please complete the following information):

• Browser: Chrome
• Version 117.0.5938.132 (Official Build) (x86_64)

Additional context I'm utilizing this package to create an implementation for a site's side navigation where my node elements are buttons. In order for the buttons to work with keyboard controls, I need access to the element that was in focus on Enter. I have my implemenation published to our dev storybook, and its the sticky sidebar on the right. https://staging-camino.sandiego.edu/storybook/?path=/story/templates-detail--text

[dgreene1]

Tree views in general have strange key controls and I would strongly recommend that you don’t use a tree view for side navigation.

I don’t have time to investigate the bug but I think this is an incorrect use case of a tree view.

tree views are not meant to have buttons in them. Try opening this in a screen reader and you’ll see how bizarre it is.

stick to the examples in the documentation please.

And for your side nav consider a different library.

[megbailey]

Hi, thank you for your quick response. Unfortunate to read, but I appreciate your honesty. You can close this out then.

[dgreene1]

Thanks, I’ll close it. The WCAG has some documentation on navbars and the expected keypresses (which are not the same ones for a tree). Good luck! :)