feat: handle dynamic value and item changes

Author: shhdharmen

cypress/item.cy.ts

@@ -0,0 +1,68 @@
+import { TestsModule } from 'src/app/tests/tests.module';
+
+describe('item', () => {
+  beforeEach(() => {
+    cy.mount(`<app-item></app-item>`, { imports: [TestsModule] });
+  });
+
+  it('mounted item matches search', () => {
+    cy.get(`[cmdkinput]`).type('b');
+    cy.get(`[cmdkitem]`).should('not.be.visible');
+    cy.get(`[data-testid="mount"]`).click();
+    cy.get(`[cmdkitem]`).should('contain.text', 'B');
+  });
+
+  it('mounted item does not match search', () => {
+    cy.get(`[cmdkinput]`).type('z');
+    cy.get(`[cmdkitem]`).should('not.be.visible');
+    cy.get(`[data-testid="mount"]`).click();
+    cy.get(`[cmdkitem]`).should('not.be.visible');
+  });
+
+  it('unmount item that is selected', () => {
+    cy.get(`[data-testid="mount"]`).click();
+    cy.get(`[cmdkitem][aria-selected="true"]`).should('contain.text', 'A');
+    cy.get(`[data-testid="unmount"]`).click();
+    cy.get(`[cmdkitem]`).should('have.length', 1);
+    cy.get(`[cmdkitem][aria-selected="true"]`).should('contain.text', 'B');
+  });
+
+  it('unmount item that is the only result', () => {
+    cy.get(`[data-testid="unmount"]`).click();
+    cy.get(`[cmdkitem]`).should('have.length', 0);
+  });
+
+  it('mount item that is the only result', () => {
+    cy.get(`[data-testid="unmount"]`).click();
+    cy.get(`.cmdk-empty`).should('have.length', 1);
+    cy.get(`[data-testid="mount"]`).click();
+    cy.get(`.cmdk-empty`).should('have.length', 0);
+    cy.get(`[cmdkitem]`).should('have.length', 1);
+  });
+
+  it('selected does not change when mounting new items', () => {
+    cy.get(`[data-testid="mount"]`).click();
+    cy.get(`[cmdkitem][data-value="b"]`).click();
+    cy.get(`[cmdkitem][aria-selected="true"]`).should('contain.text', 'B');
+    cy.get(`[data-testid="many"]`).click();
+    cy.get(`[cmdkitem][aria-selected="true"]`).should('contain.text', 'B');
+  });
+});
+
+describe('item advanced', () => {
+  beforeEach(() => {
+    cy.mount('<app-item-advanced></app-item-advanced>', {
+      imports: [TestsModule],
+    });
+  });
+
+  it('re-rendering re-matches implicit textContent value', () => {
+    cy.get(`[cmdkitem]`).should('have.length', 2);
+    cy.get(`[cmdkinput]`).type('2');
+    const button = cy.get(`[data-testid="increment"]`);
+    button.click();
+    cy.get(`[cmdkitem]`).should('not.be.visible');
+    button.click();
+    cy.get(`[cmdkitem]`).should('have.length', 2);
+  });
+});

projects/ngneat/cmdk/src/lib/cmdk.service.ts

@@ -7,6 +7,11 @@ export class CmdkService {
   search$ = this._searchSub.asObservable();
   private _itemClickedSub = new Subject<string>();
   itemClicked$ = this._itemClickedSub.asObservable();
+  private _itemValueChangedSub = new Subject<{
+    oldValue: string;
+    newValue: string;
+  }>();
+  itemValueChanged$ = this._itemValueChangedSub.asObservable();
 
   setSearch(value: string) {
     this._searchSub.next(value);
@@ -15,4 +20,8 @@ export class CmdkService {
   itemClicked(value: string) {
     this._itemClickedSub.next(value);
   }
+
+  itemValueChanged(oldValue: string, newValue: string) {
+    this._itemValueChangedSub.next({ oldValue, newValue });
+  }
 }

projects/ngneat/cmdk/src/lib/components/command/command.component.ts

@@ -25,6 +25,7 @@ import { SeparatorComponent } from '../separator/separator.component';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { LoaderDirective } from '../../directives/loader/loader.directive';
 import { ListComponent } from '../list/list.component';
+import { race } from 'rxjs';
 
 let commandId = 0;
 const GROUP_SELECTOR = 'cmdk-group';
@@ -64,6 +65,7 @@ export class CommandComponent
   separators: QueryList<SeparatorComponent> | undefined;
   @ContentChild(EmptyDirective) empty: EmptyDirective | undefined;
   @ContentChild(LoaderDirective) loader: LoaderDirective | undefined;
+  search = '';
 
   @HostBinding('attr.aria-label')
   get attrAriaLabel() {
@@ -94,6 +96,24 @@ export class CommandComponent
   }
 
   ngAfterViewInit() {
+    race(this.cmdkService.itemValueChanged$, this.items.changes)
+      .pipe(untilDestroyed(this))
+      .subscribe(() => {
+        setTimeout(() => {
+          if (this.keyManager) {
+            this.keyManager.destroy();
+          }
+          // create key and focus managers
+          this.keyManager = new ActiveDescendantKeyManager(this.items)
+            .withWrap(this.loop)
+            .skipPredicate((item) => item.disabled || !item.filtered);
+
+          if (this.filter) {
+            this.handleSearch(this.search);
+          }
+        });
+      });
+
     // show/hide loader
     if (this.loader) {
       this.loader.cmdkLoader = this.loading;
@@ -149,32 +169,32 @@ export class CommandComponent
   }
 
   handleSearch(search: string) {
+    this.search = search;
     if (this.items?.length) {
       // filter items
       this.items?.forEach((item) => {
         item.filtered = this.filter ? this.filter(item.value, search) : true;
       });
 
-      // show/hide empty directive
-      if (this.empty) {
-        this.empty.cmdkEmpty = this.filteredItems?.length === 0;
-      }
-
       // make first item active and in-turn it will also make first group active, if available
       this.makeFirstItemActive();
+    }
+    // show/hide empty directive
+    if (this.empty) {
+      this.empty.cmdkEmpty = this.filteredItems?.length === 0;
+    }
 
-      // show/hide group
-      this.groups?.forEach((group) => {
-        group.showGroup = group.filteredItems?.length > 0;
-        group._cdr.markForCheck();
-      });
+    // show/hide group
+    this.groups?.forEach((group) => {
+      group.showGroup = group.filteredItems?.length > 0;
+      group._cdr.markForCheck();
+    });
 
-      // hide separator if search and filter both are present, else show
-      this.separators?.forEach((seperator) => {
-        seperator.showSeparator = !(this.filter && search);
-        seperator.cdr.markForCheck();
-      });
-    }
+    // hide separator if search and filter both are present, else show
+    this.separators?.forEach((seperator) => {
+      seperator.showSeparator = !(this.filter && search);
+      seperator.cdr.markForCheck();
+    });
   }
 
   @HostListener('keydown', ['$event'])
@@ -185,6 +205,7 @@ export class CommandComponent
       this.filteredItems.length > 0
     ) {
       this.valueChanged.emit(this.keyManager.activeItem.value);
+      this.keyManager.activeItem.selected.emit();
     } else {
       this.keyManager.onKeydown(ev);
     }

projects/ngneat/cmdk/src/lib/directives/item/item.directive.ts

@@ -44,7 +44,10 @@ export class ItemDirective
   private _value: string = '';
   @Input()
   set value(value: string) {
-    this._value = value;
+    if (value !== this.value) {
+      this._cmdkService.itemValueChanged(this.value, value);
+      this._value = value;
+    }
   }
   get value() {
     return this._value

src/app/tests/item-advanced.component.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-item-advanced',
+  template: `
+    <div>
+      <button data-testid="increment" (click)="setCount()">
+        Increment count
+      </button>
+      <cmdk-command>
+        <input cmdkInput placeholder="Search…" />
+        <cmdk-list>
+          <div *cmdkEmpty>No results.</div>
+          <button cmdkItem [value]="'Item A ' + count">
+            Item A {{ count }}
+          </button>
+          <button cmdkItem [value]="'Item B ' + count">
+            Item B {{ count }}
+          </button>
+        </cmdk-list>
+      </cmdk-command>
+    </div>
+  `,
+})
+export class ItemAdvancedComponent {
+  count = 0;
+
+  setCount() {
+    this.count++;
+  }
+}

src/app/tests/item.component.ts

@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-item',
+  template: `
+    <div>
+      <button data-testid="mount" (click)="mount = !mount">
+        Toggle item B
+      </button>
+
+      <button data-testid="unmount" (click)="unmount = !unmount">
+        Toggle item A
+      </button>
+
+      <button data-testid="many" (click)="many = !many">
+        Toggle many items
+      </button>
+
+      <cmdk-command>
+        <input cmdkInput placeholder="Search…" />
+        <cmdk-list>
+          <div *cmdkEmpty>No results.</div>
+          <button cmdkItem *ngIf="!unmount">A</button>
+          <ng-container *ngIf="many">
+            <button cmdkItem>1</button>
+            <button cmdkItem>2</button>
+            <button cmdkItem>3</button>
+          </ng-container>
+          <button cmdkItem *ngIf="mount">B</button>
+        </cmdk-list>
+      </cmdk-command>
+    </div>
+  `,
+})
+export class ItemComponent {
+  mount = false;
+  unmount = false;
+  many = false;
+}

src/app/tests/tests.module.ts

@@ -2,10 +2,12 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { GroupComponent } from './group.component';
 import { CmdkModule } from '@ngneat/cmdk';
+import { ItemComponent } from './item.component';
+import { ItemAdvancedComponent } from './item-advanced.component';
 
 @NgModule({
-  declarations: [GroupComponent],
+  declarations: [GroupComponent, ItemComponent, ItemAdvancedComponent],
   imports: [CommonModule, CmdkModule.forRoot()],
-  exports: [GroupComponent],
+  exports: [GroupComponent, ItemComponent, ItemAdvancedComponent],
 })
 export class TestsModule {}

src/app/themes/vercel/vercel.component.ts

@@ -30,7 +30,9 @@ export class VercelComponent {
       items: [
         {
           label: 'Search Projects...',
-          itemSelected: () => this.searchProjects(),
+          itemSelected: () => {
+            this.searchProjects();
+          },
           icon: ProjectsIconComponent,
           shortcut: 'S P',
         },