fix(aria/combobox): highlighting edge cases

src/aria/combobox/combobox.spec.ts

@@ -424,6 +424,28 @@ describe('Combobox', () => {
           expect(inputElement.selectionEnd).toBe(7);
         }));
 
+        it('should not insert a completion string on backspace', fakeAsync(() => {
+          focus();
+          input('New');
+          tick();
+
+          expect(inputElement.value).toBe('New Hampshire');
+          expect(inputElement.selectionStart).toBe(3);
+          expect(inputElement.selectionEnd).toBe(13);
+        }));
+
+        it('should insert a completion string even if the items are not changed', fakeAsync(() => {
+          focus();
+          input('New');
+          tick();
+
+          input('New ');
+          tick();
+          expect(inputElement.value).toBe('New Hampshire');
+          expect(inputElement.selectionStart).toBe(4);
+          expect(inputElement.selectionEnd).toBe(13);
+        }));
+
         it('should commit the selected option on focusout', () => {
           focus();
           input('Cali');

src/aria/combobox/combobox.ts

@@ -139,7 +139,7 @@ export class ComboboxInput {
 
     /** Focuses & selects the first item in the combobox if the user changes the input value. */
     afterRenderEffect(() => {
-      this.combobox.popup()?.controls()?.items();
+      this.value();
       untracked(() => this.combobox.pattern.onFilter());
     });
   }

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

@@ -166,21 +166,7 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
       .on('ArrowUp', () => this.prev())
       .on('Home', () => this.first())
       .on('End', () => this.last())
-      .on('Escape', () => {
-        // TODO(wagnermaciel): We may want to fold this logic into the close() method.
-        if (this.inputs.filterMode() === 'highlight' && popupControls.activeId()) {
-          popupControls.unfocus();
-          popupControls.clearSelection();
-
-          const inputEl = this.inputs.inputEl();
-          if (inputEl) {
-            inputEl.value = this.inputs.inputValue!();
-          }
-        } else {
-          this.close();
-          this.inputs.popupControls()?.clearSelection();
-        }
-      }) // TODO: When filter mode is 'highlight', escape should revert to the last committed value.
+      .on('Escape', () => this.close({reset: true}))
       .on('Enter', () => this.select({commit: true, close: true}));
 
     if (popupControls.role() === 'tree') {
@@ -253,6 +239,10 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
         this.inputs.popupControls()?.clearSelection();
       }
     }
+
+    if (this.inputs.filterMode() === 'highlight' && !this.isDeleting) {
+      this.highlight();
+    }
   }
 
   /** Handles focus in events for the combobox. */
@@ -349,10 +339,14 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
     const inputEl = this.inputs.inputEl();
     const item = this.inputs.popupControls()?.getSelectedItem();
 
+    console.log('Highlighting item called with:', item?.searchTerm());
+
     if (!inputEl || !item) {
       return;
     }
 
+    console.log('Highlighting item:', item.searchTerm());
+
     const isHighlightable = item
       .searchTerm()
       .toLowerCase()
@@ -367,9 +361,29 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
   }
 
   /** Closes the combobox. */
-  close() {
-    this.expanded.set(false);
-    this.inputs.popupControls()?.unfocus();
+  close(opts?: {reset: boolean}) {
+    if (!opts?.reset) {
+      this.expanded.set(false);
+      this.inputs.popupControls()?.unfocus();
+      return;
+    }
+
+    const popupControls = this.inputs.popupControls();
+
+    if (this.inputs.filterMode() === 'highlight' && popupControls?.activeId()) {
+      popupControls.unfocus();
+      popupControls.clearSelection();
+
+      const inputEl = this.inputs.inputEl();
+      if (inputEl) {
+        inputEl.value = this.inputs.inputValue!();
+      }
+
+      return;
+    }
+
+    this.close();
+    this.inputs.popupControls()?.clearSelection();
   }
 
   /** Opens the combobox. */