feat(cdk-experimental/listbox): readonly mode

Author: wagnermaciel

src/cdk-experimental/listbox/listbox.ts

@@ -89,6 +89,9 @@ export class CdkListbox<V> {
   /** Whether the listbox is disabled. */
   disabled = input(false, {transform: booleanAttribute});
 
+  /** Whether the listbox is readonly. */
+  readonly = input(false, {transform: booleanAttribute});
+
   /** The values of the current selected items. */
   value = model<V[]>([]);
 

src/cdk-experimental/ui-patterns/listbox/listbox.spec.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {signal} from '@angular/core';
+import {signal, WritableSignal} from '@angular/core';
 import {ListboxInputs, ListboxPattern} from './listbox';
 import {OptionPattern} from './option';
 import {createKeyboardEvent} from '@angular/cdk/testing/private';
@@ -33,6 +33,7 @@ describe('Listbox Pattern', () => {
       activeIndex: inputs.activeIndex ?? signal(0),
       typeaheadDelay: inputs.typeaheadDelay ?? signal(0.5),
       wrap: inputs.wrap ?? signal(true),
+      readonly: inputs.readonly ?? signal(false),
       disabled: inputs.disabled ?? signal(false),
       skipDisabled: inputs.skipDisabled ?? signal(true),
       multi: inputs.multi ?? signal(false),
@@ -148,6 +149,18 @@ describe('Listbox Pattern', () => {
       listbox.onKeydown(end());
       expect(listbox.inputs.activeIndex()).toBe(8);
     });
+
+    it('should be able to navigate in readonly mode', () => {
+      const {listbox} = getDefaultPatterns();
+      listbox.onKeydown(down());
+      expect(listbox.inputs.activeIndex()).toBe(1);
+      listbox.onKeydown(up());
+      expect(listbox.inputs.activeIndex()).toBe(0);
+      listbox.onKeydown(end());
+      expect(listbox.inputs.activeIndex()).toBe(8);
+      listbox.onKeydown(home());
+      expect(listbox.inputs.activeIndex()).toBe(0);
+    });
   });
 
   describe('Keyboard Selection', () => {
@@ -178,6 +191,22 @@ describe('Listbox Pattern', () => {
         expect(listbox.inputs.activeIndex()).toBe(0);
         expect(listbox.inputs.value()).toEqual(['Apple']);
       });
+
+      it('should not be able to change selection when in readonly mode', () => {
+        const {listbox} = getDefaultPatterns({
+          value: signal(['Apple']),
+          readonly: signal(true),
+          multi: signal(false),
+          selectionMode: signal('follow'),
+        });
+
+        expect(listbox.inputs.activeIndex()).toBe(0);
+        expect(listbox.inputs.value()).toEqual(['Apple']);
+
+        listbox.onKeydown(down());
+        expect(listbox.inputs.activeIndex()).toBe(1);
+        expect(listbox.inputs.value()).toEqual(['Apple']);
+      });
     });
 
     describe('explicit focus & single select', () => {
@@ -207,6 +236,17 @@ describe('Listbox Pattern', () => {
         listbox.onKeydown(enter());
         expect(listbox.inputs.value()).toEqual(['Apricot']);
       });
+
+      it('should not be able to change selection when in readonly mode', () => {
+        const readonly = listbox.inputs.readonly as WritableSignal<boolean>;
+        readonly.set(true);
+        listbox.onKeydown(space());
+        expect(listbox.inputs.value()).toEqual([]);
+
+        listbox.onKeydown(down());
+        listbox.onKeydown(enter());
+        expect(listbox.inputs.value()).toEqual([]);
+      });
     });
 
     describe('explicit focus & multi select', () => {
@@ -277,6 +317,29 @@ describe('Listbox Pattern', () => {
         listbox.onKeydown(end({control: true, shift: true}));
         expect(listbox.inputs.value()).toEqual(['Cantaloupe', 'Cherry', 'Clementine', 'Cranberry']);
       });
+
+      it('should not be able to change selection when in readonly mode', () => {
+        const readonly = listbox.inputs.readonly as WritableSignal<boolean>;
+        readonly.set(true);
+        listbox.onKeydown(space());
+        expect(listbox.inputs.value()).toEqual([]);
+
+        listbox.onKeydown(down());
+        listbox.onKeydown(enter());
+        expect(listbox.inputs.value()).toEqual([]);
+
+        listbox.onKeydown(up({shift: true}));
+        expect(listbox.inputs.value()).toEqual([]);
+
+        listbox.onKeydown(down({shift: true}));
+        expect(listbox.inputs.value()).toEqual([]);
+
+        listbox.onKeydown(end({control: true, shift: true}));
+        expect(listbox.inputs.value()).toEqual([]);
+
+        listbox.onKeydown(home({control: true, shift: true}));
+        expect(listbox.inputs.value()).toEqual([]);
+      });
     });
 
     describe('follows focus & multi select', () => {
@@ -361,6 +424,19 @@ describe('Listbox Pattern', () => {
         listbox.onKeydown(end({control: true, shift: true}));
         expect(listbox.inputs.value()).toEqual(['Cantaloupe', 'Cherry', 'Clementine', 'Cranberry']);
       });
+
+      it('should not be able to change selection when in readonly mode', () => {
+        const readonly = listbox.inputs.readonly as WritableSignal<boolean>;
+        readonly.set(true);
+        listbox.onKeydown(down());
+        expect(listbox.inputs.value()).toEqual(['Apple']);
+
+        listbox.onKeydown(up());
+        expect(listbox.inputs.value()).toEqual(['Apple']);
+
+        listbox.onKeydown(space({control: true}));
+        expect(listbox.inputs.value()).toEqual(['Apple']);
+      });
     });
   });
 });

src/cdk-experimental/ui-patterns/listbox/listbox.ts

@@ -34,6 +34,7 @@ export type ListboxInputs<V> = ListNavigationInputs<OptionPattern<V>> &
   ListTypeaheadInputs &
   ListFocusInputs<OptionPattern<V>> & {
     disabled: SignalLike<boolean>;
+    readonly: SignalLike<boolean>;
   };
 
 /** Controls the state of a listbox. */
@@ -94,6 +95,15 @@ export class ListboxPattern<V> {
   keydown = computed(() => {
     const manager = new KeyboardEventManager();
 
+    if (this.inputs.readonly()) {
+      return manager
+        .on(this.prevKey, () => this.prev())
+        .on(this.nextKey, () => this.next())
+        .on('Home', () => this.first())
+        .on('End', () => this.last())
+        .on(this.typeaheadRegexp, e => this.search(e.key));
+    }
+
     if (!this.followFocus()) {
       manager
         .on(this.prevKey, () => this.prev())
@@ -150,15 +160,17 @@ export class ListboxPattern<V> {
   pointerdown = computed(() => {
     const manager = new PointerEventManager();
 
+    if (this.inputs.readonly()) {
+      manager.on(e => this.goto(e));
+    }
+
     if (this.inputs.multi()) {
-      manager
+      return manager
         .on(e => this.goto(e, {toggle: true}))
         .on(Modifier.Shift, e => this.goto(e, {selectFromActive: true}));
-    } else {
-      manager.on(e => this.goto(e, {toggleOne: true}));
     }
 
-    return manager;
+    return manager.on(e => this.goto(e, {toggleOne: true}));
   });
 
   constructor(readonly inputs: ListboxInputs<V>) {

src/components-examples/cdk-experimental/listbox/cdk-listbox/cdk-listbox-example.html

@@ -2,6 +2,7 @@
   <mat-checkbox [formControl]="wrap">Wrap</mat-checkbox>
   <mat-checkbox [formControl]="multi">Multi</mat-checkbox>
   <mat-checkbox [formControl]="disabled">Disabled</mat-checkbox>
+  <mat-checkbox [formControl]="readonly">Readonly</mat-checkbox>
   <mat-checkbox [formControl]="skipDisabled">Skip Disabled</mat-checkbox>
 
   <mat-form-field subscriptSizing="dynamic" appearance="outline">
@@ -33,8 +34,9 @@
 <ul
   cdkListbox
   [wrap]="wrap.value"
-  [disabled]="disabled.value"
   [multi]="multi.value"
+  [readonly]="readonly.value"
+  [disabled]="disabled.value"
   [skipDisabled]="skipDisabled.value"
   [orientation]="orientation"
   [focusMode]="focusMode"

src/components-examples/cdk-experimental/listbox/cdk-listbox/cdk-listbox-example.ts

@@ -30,6 +30,7 @@ export class CdkListboxExample {
   wrap = new FormControl(true, {nonNullable: true});
   multi = new FormControl(false, {nonNullable: true});
   disabled = new FormControl(false, {nonNullable: true});
+  readonly = new FormControl(false, {nonNullable: true});
   skipDisabled = new FormControl(true, {nonNullable: true});
 
   fruits = [