fix(aria/combobox): highlighting edge cases

Author: wagnermaciel

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

@@ -239,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. */
@@ -335,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()