dgreene1 / react-accessible-treeview

A react component that implements the treeview pattern as described by the WAI-ARIA Authoring Practices.
https://dgreene1.github.io/react-accessible-treeview
MIT License
277 stars 37 forks source link

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

Closed megbailey closed 1 year ago

megbailey commented 1 year ago

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):

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 commented 1 year ago

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 commented 1 year ago

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

dgreene1 commented 1 year ago

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! :)