[Bug]: Treenode does not pick up passed through props active or selected

[AustinGitHub]

Package

@carbon/react

Browser

Chrome

Package version

1.60.3

React version

18.12.1

Description

All the versions we are using

I am actively passing through false but I see that active is still enabled and when passing through an empty array to selected it seems to still show selected. This means we can't make the selections toggle-able. How can I get the selection highlight taken off?

Reproduction/example

N/A

Steps to reproduce

This is very easy to reproduce.

Code block we have

Video

Screen.Recording.2024-09-06.at.1.44.37.PM.mov

Video of same issue on playground

Screen.Recording.2024-09-06.at.1.47.17.PM.mov

Part of the project I am working on requires a use case where use should be able to deselect the tree that is selected.

Hi @tay1orjones can you help with getting some priority on this please? We are working on a project and need this use case to be supported, thanks!

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

IBM NextGen DataStage

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[janhassel]

Hi @AustinGitHub!

props.active and props.selected on the TreeNode are overwritten/handled by TreeView. You can set the initial state by passing the TreeNode's ID to props.active and props.selected of TreeView – however, the component won't re-render if these values change.

Ref #14451

In order to achieve this, you can either force the re-render or opt-in to the new controllable API of TreeView documented here: https://react.carbondesignsystem.com/?path=/docs/experimental-feature-flags-treeview--overview

[AustinGitHub]

Thanks, I will take a look at that

[AustinGitHub]

Hi @janhassel I tried this but it didn't work. I am on carbon react 1.66.0 version
Here is screenshot of my code

So when I click on the tree view I see that onSelect does get triggered but then my expectation when I click it again is that I set the state for property isStageSelected to empty array such that when it gets re-rendered the active and selected would be false and the tree view item would not be selected and active anymore. Basically making this a toggle-able feature.
I see it gets re-rendered with empty array, but I see on UI it still shows active and selected. Is this a bug?
Thanks!

[AustinGitHub]

I am using alternative for now which will just check the dom for the class and remove it before applying the new class

[janhassel]

@AustinGitHub Could you share a reduced reproduction on Stackblitz or CodeSandbox? From your screenshot I can only assume a few potential issues:

1. Is the useFeatureFlag component something custom or are you importing it under a different name? Can you make sure you're importing and using the correct Carbon component`

import { unstable_FeatureFlags as FeatureFlags } from '@carbon/react';

<FeatureFlags flags={{
  'enable-tree view-controllable': true,
}}>
  <TreeView … />
</FeatureFlags>

2. What's stored in the isStageSelected variable? Is it a boolean, a string or an array (and does it change at any time?

The active prop only accepts a string as only one node can be active at any given time. Currently you pass true or null
props.selected however expects an array of strings.