Selected element is not highlighted in lwc tree component

Question

I am using tree component. Problem is that when I select any item in the tree then that item is highlighted. But as soon as I click at any other place on the screen highlight is removed. Tree element remain selected. You can see the working code here playground.

Edit: Above code is also behaving differently in different browsers. In chrome and edge (use chromium) above code doesn't work. But in safarai and Firefox it is working fine.

In Firefox whenever we select any item aria-selected attribute on that lightning-tree-item becomes true. when we select any item on chrome aria-setsize attribute becomes true.

Is there any way we can keep the selected item highlighted in chrome also.

Answer 1

As mentioned in the previous answer from Eugene Kashida that we will have to wait for the chrome to fix it.

There is still one workaround that will fix it in case it is critical for you. Note it is a workaround till chrome fixes it.

The tree component and tree-item component is completely open source.

You can use these in your orgs except modify these two lines in the treeItem.js file

You might need to import few labels(lightning_LightningTree_expandBranch,lightning_LightningTree_collapseBranch) and also few private components(utilsPrivate,utils,c-primitive-icon) and everything is in the repository.

Once you have it in your org, change below lines

makeChildFocusable(childKey, shouldFocus) {
    const child = this.getImmediateChildItem(childKey);
    if (child) {
        if (child.tabIndex !== '0') {
            child.tabIndex = '0';
        }
        if (shouldFocus) {
            child.focus();
        }
        child.setAttribute('aria-selected', true);
        //child.ariaSelected = true;
    }
}

makeChildUnfocusable() {
    //this.ariaSelected = 'false';
    this.setAttribute('aria-selected', false);
    this.removeAttribute('tabindex');
}

Notice the commented lines and new line using setAttribute

In your component instead of using lightning namespace you will use c namespace

<template>
<div class="slds-m-top_medium slds-m-bottom_x-large background">
    <h2 class="slds-text-heading_medium slds-m-bottom_medium">
        Tree component with a few levels of depth. Click on the arrow icons to expand or collapse a branch.
    </h2>

    <!-- Simple -->
    <div class="slds-p-around_medium lgc-bg">
        <c-tree items={items} header="Roles"></c-tree>
    </div>
</div>

Once chrome fixes it, replace with lightning namespace.

Answer 2

Thanks for bringing this issue to light!

This is a bug in Chrome that was exposed due to AOM features being turned on recently: https://www.chromestatus.com/feature/5962105603751936

The bug (https://bugs.chromium.org/p/chromium/issues/detail?id=914469) has been addressed so we're going to wait for Chrome to ship the fix instead of attempting any workarounds.

Our tests (https://github.com/salesforce/lwc/pull/1819) also caught this issue so we've temporarily disabled them.

Answer 3

Well, I don't think that the issue is with the chrome or edge. It is likely an error with the component implementation which relies on aria-selected attribute to provide the left blue border. According to the specs of the aria-selected property it should be used in the following roles.

gridcell
option
row
tab. 

This attribute is used with single-selection and multiple-selection widgets:

• Single-selection containers where the currently focused item is not selected. The selection normally follows the focus and is managed by the user agent.
• Multiple-selection containers. Authors SHOULD ensure that any selectable descendant of a container in which the aria-multiselectable attribute is true specifies a value of either true or false for the aria-selected attribute.

Any explicit assignment of aria-selected takes precedence over the implicit selection based on focus. If no DOM element in the widget is explicitly marked as selected, assistive technologies MAY convey implicit selection which follows the keyboard focus of the managed focus widget

---

SLDS relying on the aria attributes

.slds-tree [role=treeitem][aria-selected=true]>.slds-tree__item {
    background: rgba(21,137,238,.1);
    -webkit-box-shadow: #1589ee 4px 0 0 inset;
    box-shadow: #1589ee 4px 0 0 inset;
}