fix(aria/combobox): readonly behavior (#32169)

* fix(aria/combobox): readonly behavior

* docs(aria/combobox): dev app ui changes

* docs(aria/combobox): readonly example

* fixup! docs(aria/combobox): readonly example

* fixup! fix(aria/combobox): readonly behavior

Author: wagnermaciel

src/aria/combobox/combobox.spec.ts

@@ -52,14 +52,19 @@ describe('Combobox', () => {
     const enter = (modifierKeys?: {}) => keydown('Enter', modifierKeys);
     const escape = (modifierKeys?: {}) => keydown('Escape', modifierKeys);
 
-    function setupCombobox(opts: {filterMode?: 'manual' | 'auto-select' | 'highlight'} = {}) {
+    function setupCombobox(
+      opts: {readonly?: boolean; filterMode?: 'manual' | 'auto-select' | 'highlight'} = {},
+    ) {
       TestBed.configureTestingModule({});
       fixture = TestBed.createComponent(ComboboxListboxExample);
       const testComponent = fixture.componentInstance;
 
       if (opts.filterMode) {
         testComponent.filterMode.set(opts.filterMode);
       }
+      if (opts.readonly) {
+        testComponent.readonly.set(true);
+      }
 
       fixture.detectChanges();
       defineTestVariables();
@@ -526,6 +531,35 @@ describe('Combobox', () => {
       });
     });
 
+    describe('Readonly', () => {
+      beforeEach(() => setupCombobox({readonly: true}));
+
+      it('should close on selection', () => {
+        focus();
+        down();
+        click(getOption('Alabama')!);
+        expect(inputElement.value).toBe('Alabama');
+        expect(inputElement.getAttribute('aria-expanded')).toBe('false');
+      });
+
+      it('should close on escape', () => {
+        focus();
+        down();
+        expect(inputElement.getAttribute('aria-expanded')).toBe('true');
+        escape();
+        expect(inputElement.getAttribute('aria-expanded')).toBe('false');
+      });
+
+      it('should clear selection on escape when closed', () => {
+        focus();
+        down();
+        enter();
+        expect(inputElement.value).toBe('Alabama');
+        escape();
+        expect(inputElement.value).toBe('');
+      });
+    });
+
     // describe('with programmatic value changes', () => {
     //   // TODO(wagnermaciel): Figure out if there's a way to automatically update the
     //   // input value when the popup value signal is updated programmatically.
@@ -590,14 +624,19 @@ describe('Combobox', () => {
     const enter = (modifierKeys?: {}) => keydown('Enter', modifierKeys);
     const escape = (modifierKeys?: {}) => keydown('Escape', modifierKeys);
 
-    function setupCombobox(opts: {filterMode?: 'manual' | 'auto-select' | 'highlight'} = {}) {
+    function setupCombobox(
+      opts: {readonly?: boolean; filterMode?: 'manual' | 'auto-select' | 'highlight'} = {},
+    ) {
       TestBed.configureTestingModule({});
       fixture = TestBed.createComponent(ComboboxTreeExample);
       const testComponent = fixture.componentInstance;
 
       if (opts.filterMode) {
         testComponent.filterMode.set(opts.filterMode);
       }
+      if (opts.readonly) {
+        testComponent.readonly.set(true);
+      }
 
       fixture.detectChanges();
       defineTestVariables();
@@ -1053,6 +1092,40 @@ describe('Combobox', () => {
         expect(getTreeItem('August')!.getAttribute('aria-selected')).toBe('true');
       });
     });
+
+    describe('Readonly', () => {
+      beforeEach(() => setupCombobox({readonly: true}));
+
+      it('should close on selection', () => {
+        focus();
+        down();
+        right();
+        right();
+        enter();
+        expect(inputElement.value).toBe('December');
+        expect(inputElement.getAttribute('aria-expanded')).toBe('false');
+      });
+
+      it('should close on escape', () => {
+        focus();
+        down();
+        expect(inputElement.getAttribute('aria-expanded')).toBe('true');
+        escape();
+        expect(inputElement.getAttribute('aria-expanded')).toBe('false');
+      });
+
+      it('should clear selection on escape when closed', () => {
+        focus();
+        down();
+        right();
+        right();
+        enter();
+        expect(inputElement.value).toBe('December');
+        expect(inputElement.getAttribute('aria-expanded')).toBe('false');
+        escape();
+        expect(inputElement.value).toBe('');
+      });
+    });
   });
 });
 
@@ -1061,6 +1134,7 @@ describe('Combobox', () => {
 <div
   ngCombobox
   #combobox="ngCombobox"
+  [readonly]="readonly()"
   [filterMode]="filterMode()"
 >
   <input
@@ -1087,12 +1161,11 @@ describe('Combobox', () => {
   imports: [Combobox, ComboboxInput, ComboboxPopup, ComboboxPopupContainer, Listbox, Option],
 })
 class ComboboxListboxExample {
+  readonly = signal(false);
+  searchString = signal('');
   value = signal<string[]>([]);
-
   filterMode = signal<'manual' | 'auto-select' | 'highlight'>('manual');
 
-  searchString = signal('');
-
   options = computed(() =>
     states.filter(state => state.toLowerCase().startsWith(this.searchString().toLowerCase())),
   );
@@ -1103,6 +1176,7 @@ class ComboboxListboxExample {
 <div
   ngCombobox
   #combobox="ngCombobox"
+  [readonly]="readonly()"
   [firstMatch]="firstMatch()"
   [filterMode]="filterMode()"
 >
@@ -1157,13 +1231,11 @@ class ComboboxListboxExample {
   ],
 })
 class ComboboxTreeExample {
-  value = signal<string[]>([]);
-
-  filterMode = signal<'manual' | 'auto-select' | 'highlight'>('manual');
-
+  readonly = signal(false);
   searchString = signal('');
-
+  value = signal<string[]>([]);
   nodes = computed(() => this.filterTreeNodes(TREE_NODES));
+  filterMode = signal<'manual' | 'auto-select' | 'highlight'>('manual');
 
   firstMatch = computed<string | undefined>(() => {
     const flatNodes = this.flattenTreeNodes(this.nodes());

src/aria/combobox/combobox.ts

@@ -119,6 +119,7 @@ export class Combobox<V> {
     '[attr.aria-controls]': 'combobox.pattern.popupId()',
     '[attr.aria-haspopup]': 'combobox.pattern.hasPopup()',
     '[attr.aria-autocomplete]': 'combobox.pattern.autocomplete()',
+    '[attr.readonly]': 'combobox.pattern.readonly()',
   },
 })
 export class ComboboxInput {

src/aria/ui-patterns/combobox/combobox.spec.ts

@@ -585,6 +585,35 @@ describe('Combobox with Listbox Pattern', () => {
       });
     });
   });
+
+  describe('Readonly mode', () => {
+    it('should select and close on selection', () => {
+      const {combobox, listbox, inputEl} = getPatterns({readonly: true});
+      combobox.onPointerup(clickOption(listbox.inputs.items(), 2));
+      expect(listbox.getSelectedItem()).toBe(listbox.inputs.items()[2]);
+      expect(listbox.inputs.value()).toEqual(['Banana']);
+      expect(inputEl.value).toBe('Banana');
+      expect(combobox.expanded()).toBe(false);
+    });
+
+    it('should close on escape', () => {
+      const {combobox} = getPatterns({readonly: true});
+      combobox.onKeydown(down());
+      expect(combobox.expanded()).toBe(true);
+      combobox.onKeydown(escape());
+      expect(combobox.expanded()).toBe(false);
+    });
+
+    it('should clear selection on escape when already closed', () => {
+      const {combobox, listbox} = getPatterns({readonly: true});
+      combobox.onPointerup(clickOption(listbox.inputs.items(), 2));
+      expect(listbox.getSelectedItem()).toBe(listbox.inputs.items()[2]);
+      expect(listbox.inputs.value()).toEqual(['Banana']);
+      combobox.onKeydown(escape());
+      expect(listbox.getSelectedItem()).toBe(undefined);
+      expect(listbox.inputs.value()).toEqual([]);
+    });
+  });
 });
 
 describe('Combobox with Tree Pattern', () => {
@@ -894,4 +923,36 @@ describe('Combobox with Tree Pattern', () => {
       });
     });
   });
+
+  describe('Readonly mode', () => {
+    it('should select and close on selection', () => {
+      const {combobox, tree, inputEl} = getPatterns({readonly: true});
+      combobox.onPointerup(clickInput(inputEl));
+      expect(combobox.expanded()).toBe(true);
+      combobox.onPointerup(clickTreeItem(tree.inputs.allItems(), 0));
+      expect(tree.inputs.value()).toEqual(['Fruit']);
+      expect(inputEl.value).toBe('Fruit');
+      expect(combobox.expanded()).toBe(false);
+    });
+
+    it('should close on escape', () => {
+      const {combobox} = getPatterns({readonly: true});
+      combobox.onKeydown(down());
+      expect(combobox.expanded()).toBe(true);
+      combobox.onKeydown(escape());
+      expect(combobox.expanded()).toBe(false);
+    });
+
+    it('should clear selection on escape when already closed', () => {
+      const {combobox, tree, inputEl} = getPatterns({readonly: true});
+      combobox.onPointerup(clickInput(inputEl));
+      combobox.onPointerup(clickTreeItem(tree.inputs.allItems(), 0));
+      expect(tree.inputs.value()).toEqual(['Fruit']);
+      expect(inputEl.value).toBe('Fruit');
+      expect(combobox.expanded()).toBe(false);
+      combobox.onKeydown(escape());
+      expect(tree.inputs.value()).toEqual([]);
+      expect(inputEl.value).toBe('');
+    });
+  });
 });

src/aria/ui-patterns/combobox/combobox.ts

@@ -144,16 +144,24 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
   /** The ARIA role of the popup associated with the combobox. */
   hasPopup = computed(() => this.inputs.popupControls()?.role() || null);
 
-  /** Whether the combobox is interactive. */
-  isInteractive = computed(() => !this.inputs.disabled() && !this.inputs.readonly());
+  /** Whether the combobox is read-only. */
+  readonly = computed(() => this.inputs.readonly() || null);
 
   /** The keydown event manager for the combobox. */
   keydown = computed(() => {
     if (!this.expanded()) {
-      return new KeyboardEventManager()
+      const manager = new KeyboardEventManager()
         .on('ArrowDown', () => this.open({first: true}))
         .on('ArrowUp', () => this.open({last: true}))
         .on('Escape', () => this.close({reset: true}));
+
+      if (this.readonly()) {
+        manager
+          .on('Enter', () => this.open({selected: true}))
+          .on(' ', () => this.open({selected: true}));
+      }
+
+      return manager;
     }
 
     const popupControls = this.inputs.popupControls();
@@ -170,6 +178,10 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
       .on('Escape', () => this.close({reset: true}))
       .on('Enter', () => this.select({commit: true, close: true}));
 
+    if (this.readonly()) {
+      manager.on(' ', () => this.select({commit: true, close: true}));
+    }
+
     if (popupControls.role() === 'tree') {
       const treeControls = popupControls as ComboboxTreeControls<T, V>;
 
@@ -196,7 +208,11 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
       }
 
       if (e.target === this.inputs.inputEl()) {
-        this.open();
+        if (this.readonly()) {
+          this.expanded() ? this.close() : this.open({selected: true});
+        } else {
+          this.open();
+        }
       }
     }),
   );
@@ -205,21 +221,21 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
 
   /** Handles keydown events for the combobox. */
   onKeydown(event: KeyboardEvent) {
-    if (this.isInteractive()) {
+    if (!this.inputs.disabled()) {
       this.keydown().handle(event);
     }
   }
 
   /** Handles pointerup events for the combobox. */
   onPointerup(event: PointerEvent) {
-    if (this.isInteractive()) {
+    if (!this.inputs.disabled()) {
       this.pointerup().handle(event);
     }
   }
 
   /** Handles input events for the combobox. */
   onInput(event: Event) {
-    if (!this.isInteractive()) {
+    if (this.inputs.disabled() || this.inputs.readonly()) {
       return;
     }
 
@@ -253,7 +269,7 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
 
   /** Handles focus out events for the combobox. */
   onFocusOut(event: FocusEvent) {
-    if (this.inputs.disabled() || this.inputs.readonly()) {
+    if (this.inputs.disabled()) {
       return;
     }
 
@@ -385,18 +401,23 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
         popupControls?.clearSelection();
       }
     }
+
+    this.close();
+
+    if (!this.readonly()) {
+      this.inputs.popupControls()?.clearSelection();
+    }
   }
 
   /** Opens the combobox. */
-  open(nav?: {first?: boolean; last?: boolean}) {
+  open(nav?: {first?: boolean; last?: boolean; selected?: boolean}) {
     this.expanded.set(true);
 
     const inputEl = this.inputs.inputEl();
 
-    if (inputEl) {
+    if (inputEl && this.inputs.filterMode() === 'highlight') {
       const isHighlighting = inputEl.selectionStart !== inputEl.value.length;
       this.inputs.inputValue?.set(inputEl.value.slice(0, inputEl.selectionStart || 0));
-
       if (!isHighlighting) {
         this.highlightedItem.set(undefined);
       }
@@ -408,6 +429,10 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
     if (nav?.last) {
       this.last();
     }
+    if (nav?.selected) {
+      const selectedItem = this.inputs.popupControls()?.getSelectedItem();
+      selectedItem ? this.inputs.popupControls()?.focus(selectedItem) : this.first();
+    }
   }
 
   /** Navigates to the next focusable item in the combobox popup. */

src/components-examples/aria/combobox/combobox-auto-select/combobox-auto-select-example.ts

@@ -62,7 +62,7 @@ export class ComboboxAutoSelectExample {
 
     if (comboboxRect) {
       popoverEl.style.width = `${comboboxRect.width}px`;
-      popoverEl.style.top = `${comboboxRect.bottom}px`;
+      popoverEl.style.top = `${comboboxRect.bottom + 4}px`;
       popoverEl.style.left = `${comboboxRect.left - 1}px`;
     }