refactor(aria/tree): slight improvements to tree example

Author: tjshiu

src/aria/tree/tree.ts

@@ -184,7 +184,7 @@ export class Tree<V> {
     });
 
     afterRenderEffect(() => {
-      if (!this._hasFocused()) {
+      if (!this._hasFocused() && !this._pattern.treeBehavior.inputs.activeItem()) {
         this._pattern.setDefaultState();
       }
     });

src/components-examples/aria/simple-combobox/simple-combobox-examples.css

@@ -166,6 +166,12 @@
   align-items: center;
   gap: 1rem;
   padding: 0.3rem 1rem;
+  border-radius: var(--mat-sys-corner-extra-small);
+}
+
+.example-tree-item[data-active='true'] {
+  background-color: color-mix(in srgb, var(--mat-sys-primary) 10%, transparent);
+  outline: 2px solid var(--mat-sys-primary);
 }
 
 li[aria-expanded='false']+ul[role='group'] {

src/components-examples/aria/simple-combobox/simple-combobox-tree/simple-combobox-tree-example.html

@@ -13,7 +13,7 @@
 
   <ng-template
     [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
-    [cdkConnectedOverlayOpen]="true"
+    [cdkConnectedOverlayOpen]="popupExpanded()"
     [cdkConnectedOverlayDisableClose]="true"
   >
     <ng-template ngComboboxPopup [combobox]="combobox" popupType="tree">

src/components-examples/aria/simple-combobox/simple-combobox-tree/simple-combobox-tree-example.ts

@@ -8,7 +8,7 @@
 
 import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/simple-combobox';
 import {Tree, TreeItem, TreeItemGroup} from '@angular/aria/tree';
-import {Component, computed, signal, viewChild} from '@angular/core';
+import {Component, afterRenderEffect, computed, signal, viewChild} from '@angular/core';
 import {NgTemplateOutlet} from '@angular/common';
 import {OverlayModule} from '@angular/cdk/overlay';
 
@@ -43,8 +43,16 @@ export class SimpleComboboxTreeExample {
 
   readonly dataSource = signal(FOOD_DATA);
 
+  constructor() {
+    afterRenderEffect(() => {
+      if (this.popupExpanded()) {
+        this.tree()?.scrollActiveItemIntoView();
+      }
+    });
+  }
+
   filteredGroups = computed(() => {
-    const search = this.searchString().toLowerCase();
+    const search = this.searchString().trim().toLowerCase();
     const data = this.dataSource();
 
     if (!search) {
@@ -61,7 +69,7 @@ export class SimpleComboboxTreeExample {
         return {
           ...node,
           children,
-          expanded: children && children.length > 0,
+          expanded: children && children.length > 0 ? true : node.expanded,
         };
       }