Hello,

Thank you for your detailed feedback and for explaining your specific use case. I understand that the proposed workaround doesn't fully meet your requirements since you're using the igx-tree component for navigation and need to maintain the current selection when expanding or collapsing nodes. You want the user's view to remain unchanged while they explore the tree structure.

Given that the current behavior of the igx-tree is by design and differs from the jQuery Ignite UI implementation you're familiar with, I recommend submitting a feature request to our development team. This way, they can consider enhancing the component to better accommodate scenarios like yours.

Hello,

First of all, I'd like to clarify that the behavior you're experiencing with the igx-tree component is by design. The activeNodeChanged event is triggered both when the user clicks on the expand/collapse icon as well as when they click on the node itself. This means it's not possible to prevent the activeNodeChanged event from firing when the expand/collapse icon is clicked.

However, you can differentiate between these actions in your event handling logic. Here's a recommended approach to achieve the desired functionality:

Step 1: Handle activeNodeChanged Event

Add the activeNodeChanged event handler to the igx-tree component as shown below:

<igx-tree class="tree-root" (activeNodeChanged)="onActiveNodeChanged($event)"> </igx-tree>

In this setup, the activeNodeChanged event is fired whenever the active node changes, regardless of whether the change is due to a node click or an icon click.

Step 2: Handle Expand/Collapse Icon Click Separately

Within the ng-template of the igxTreeExpandIndicator directive, you can add an igx-icon component with a click event handler. This will allow you to determine if the expand/collapse icon was clicked:

<ng-template igxTreeExpandIndicator let-expanded>
    <igx-icon (click)="onExpandIconClick(expanded)">
        {{ expanded ? "expand_more" : "chevron_right" }}
    </igx-icon>
</ng-template>

By using this approach, you can track whether the user clicked the expand/collapse icon specifically, allowing for differentiated logic.

Step 3: Use a Flag to Determine Actions

In your TypeScript file, use a private flag expandIconClicked to track whether the icon was clicked. Here’s the updated logic:

public data = DATA;

private expandIconClicked = false;

constructor() {}

public onExpandIconClick(expanded: boolean): void {
    if (!expanded) {
        // Mark that the expand icon was clicked
        this.expandIconClicked = true;
    }
}
 
public onActiveNodeChanged(event): void {
    setTimeout(() => {
        if (this.expandIconClicked) {
            // Prevent the default action if expand icon was clicked
            console.log('Node was expanded/collapsed with the icon, no further action needed.');
            this.expandIconClicked = false; // Reset the flag
        } else {
            // Perform actions if the node was clicked
            console.log('Node was clicked and active, performing actions.');
            // Insert your action logic here
        }
    }, 100);

}

Summary of the Logic:

1. Expand/Collapse Icon Click: When the expand/collapse icon is clicked, the expandIconClicked flag is set to true.
2. Node Click: When the node itself is clicked, the flag remains false.
3. Event Handling: In the onActiveNodeChanged method, check the flag:
   • If expandIconClicked is true, it means the icon was clicked, so skip any actions.
   • If expandIconClicked is false, it means the node was clicked, so you can safely perform the necessary actions.

This approach will help you differentiate between node clicks and expand/collapse actions, allowing you to control the behavior accordingly.

The described scenario could be observed here:

Live Example: