nimble-tree-item briefly renders as selected if selected attribute is bound

[kroeschl]

🐛 Bug Report

When a new nimble-tree-item with the selected attribute bound is first rendered, the element will briefly be styled as if it's selected. This happens even if I hard-code [selected]="false".

Screencast.From.2025-08-05.15-31-59.mp4

💻 Repro or Code Sample

This is easiest to reproduce inside a cdk-virtual-scroll-viewport as shown above, but I was also able to reproduce it (though more briefly) with a regular ngFor and changing the size of its input array.

@Component()
class MyComponent {
    junkArray = [...Array(10000).keys()];
    ...

<cdk-virtual-scroll-viewport itemSize="32" style="height: 75vh">
    <nimble-tree-view>
        <nimble-tree-item *cdkVirtualFor="let i of junkArray; templateCacheSize: 0" [selected]="false">
            Item {{ i }}
        </nimble-tree-item>
    </nimble-tree-view>
</cdk-virtual-scroll-viewport>

Setting templateCacheSize: 0 makes this reproduce more consistently, but it still happens without that set.

🤔 Expected Behavior

The item should not be marked as selected.

😯 Current Behavior

The item is briefly styled as if it's selected, which makes for bad scrolling behavior in our case.

💁 Possible Solution

🤷 I'd be happy to contribute if someone can point me in the right direction.

🔦 Context

I'm migrating a vertical navigation list from a Bootstrap 3 (!) vertical pills-type thing to nimble-tree-view.

🌍 Your Environment

• OS & Device: Debian 13 PC
• Browser: Reproduced with both Chrome 139.0.7258.31 and Firefox 140.0.4
• Version: @ni/nimble-angular 30.1.1

[jattasNI]

@mollykreis could you take a first pass look and help triage how difficult this would be to fix?

[mollykreis]

I've taken some time looking into the issue, and from what I can tell, it is related to the timing of Angular evaluating the binding in combination with the nimble styling being evaluated. With the example code provided in the issue description, the HTML template briefly passes through a state of <nimble-tree-item selected="false" ... which causes the [selected] styling to be applied until the template settles in the state without the selected attribute. Ultimately, I'm not sure what the fix is or how easily we can address the timing issue within nimble. However, the problem does not occur with a binding to [attr.selected], which I think is an acceptable work around until spending [likely significantly] more time debugging the issue is a priority.

@kroeschl - can you try the workaround I mentioned of [attr.selected]="boundValue"? When using the attribute binding, boundValue should be an empty string when the tree-item is selected and null when the tree item is not selected.

[kroeschl]

can you try the workaround I mentioned of [attr.selected]="boundValue"? When using the attribute binding, boundValue should be an empty string when the tree-item is selected and null when the tree item is not selected.

Aha, I'd tried [attr.selected] with a boolean but not null/''. That hackaround seems to work for me, thanks!