From 37485bfa68e57f76bfc7aa45438e87f1f26dee18 Mon Sep 17 00:00:00 2001 From: Radoslav Karaivanov Date: Fri, 5 Apr 2024 11:08:26 +0300 Subject: [PATCH] fix(tree): Active tree item on click Closes #1131 --- CHANGELOG.md | 1 + src/components/tree/tree-item.ts | 13 ++++++++++--- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0bfe8b317..efd17ae39 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/). ### Fixed - Date-time input - `inputFormat` is not applied to an already set value [#1114](https://github.com/IgniteUI/igniteui-webcomponents/issues/1114) - Select, Dropdown - Unable to select item when clicking on a wrapping element inside the dropdown/select item slot [#1123](https://github.com/IgniteUI/igniteui-webcomponents/issues/1123) +- Tree - active state is correctly applied to the correct tree node on click [#1131](https://github.com/IgniteUI/igniteui-webcomponents/issues/1131) ## [4.8.0] - 2024-03-20 ### Added diff --git a/src/components/tree/tree-item.ts b/src/components/tree/tree-item.ts index e6af3747a..16cb9d7b7 100644 --- a/src/components/tree/tree-item.ts +++ b/src/components/tree/tree-item.ts @@ -20,7 +20,11 @@ import IgcCheckboxComponent from '../checkbox/checkbox.js'; import { blazorSuppress } from '../common/decorators/blazorSuppress.js'; import { watch } from '../common/decorators/watch.js'; import { registerComponent } from '../common/definitions/register.js'; -import { isLTR, partNameMap } from '../common/util.js'; +import { + findElementFromEventPath, + isLTR, + partNameMap, +} from '../common/util.js'; import IgcIconComponent from '../icon/icon.js'; import IgcCircularProgressComponent from '../progress/circular-progress.js'; @@ -287,7 +291,10 @@ export default class IgcTreeItemComponent extends LitElement { } private itemClick(event: MouseEvent): void { - if (this.disabled) { + if ( + this.disabled || + !this.isSameNode(findElementFromEventPath(this.tagName, event)!) + ) { return; } this.tabIndex = 0; @@ -298,7 +305,7 @@ export default class IgcTreeItemComponent extends LitElement { this.expandWithEvent(); } } - this.navService?.setFocusedAndActiveItem(this, true, false); + this.navService?.setFocusedAndActiveItem(this, true, true); } private expandIndicatorClick(): void {