fixup! feat(cdk-experimental/ui-patterns): create combobox ui pattern

Author: wagnermaciel

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

@@ -49,6 +49,9 @@ export type ComboboxPopupControls<T extends ListItem<V>, V> = {
   /** Selects the current item in the popup. */
   select: (item?: T) => void;
 
+  /** Clears the selection state of the popup. */
+  clearSelection: () => void;
+
   /** Filters the items in the popup. */
   filter: (text: string) => void;
 
@@ -95,7 +98,20 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
       .on('ArrowUp', () => this.prev())
       .on('Home', () => this.first())
       .on('End', () => this.last())
-      .on('Escape', () => this.close())
+      .on('Escape', () => {
+        if (this.inputs.filterMode() === 'highlight' && this.inputs.popupControls()?.activeId()) {
+          this.inputs.popupControls()?.unfocus();
+          this.inputs.popupControls()?.clearSelection();
+
+          const inputEl = this.inputs.inputEl();
+
+          if (inputEl) {
+            inputEl.value = this.searchString();
+          }
+        } else {
+          this.close();
+        }
+      }) // TODO: When filter mode is 'highlight', escape should revert to the last committed value.
       .on('Enter', () => this.select({commit: true, close: true}));
   });
 
@@ -141,7 +157,11 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
     this.open();
     this.inputs.popupControls()?.first();
 
-    if (event instanceof InputEvent && event.inputType === 'deleteContentBackward') {
+    if (
+      event instanceof InputEvent &&
+      this.inputs.filterMode() !== 'manual' &&
+      event.inputType.match(/delete.*/)
+    ) {
       this.inputs.popupControls()?.select();
       return;
     }
@@ -161,18 +181,19 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
       !(event.relatedTarget instanceof HTMLElement) ||
       !this.inputs.containerEl()?.contains(event.relatedTarget)
     ) {
-      this.close();
-
       if (this.inputs.filterMode() !== 'manual') {
         this.commit();
       }
+
+      this.close();
     }
   }
 
   /** Closes the combobox. */
   close() {
     this.expanded.set(false);
     this.inputs.popupControls()?.unfocus();
+    this.inputs.popupControls()?.clearSelection();
   }
 
   /** Opens the combobox. */
@@ -242,6 +263,10 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
     if (opts.highlight) {
       this.highlight();
     }
+    if (this.inputs.filterMode() === 'manual') {
+      this.inputs.popupControls()?.clearSelection();
+      this.inputs.value.set(undefined);
+    }
   }
 
   /** Updates the value of the input based on the currently selected item. */

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

@@ -288,6 +288,7 @@ export class ListboxPattern<V> {
     first: () => this.listBehavior.first(),
     unfocus: () => this.listBehavior.unfocus(),
     select: item => this.listBehavior.select(item),
+    clearSelection: () => this.listBehavior.deselectAll(),
 
     getItem: e => this._getItem(e),
     getSelectedItem: () => this.inputs.items().find(i => i.selected()),