fix(combobox): keep focus while filtering and improve input on small …

…devices closes #106 closes #139 Signed-off-by: Ivan Donchev <idonchev@vmware.com>
vmware-clarity · Jun 6, 2022 · ec7d423 · ec7d423
1 parent c964b9d
commit ec7d423
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/projects/angular/src/forms/combobox/_combobox.clarity.scss b/projects/angular/src/forms/combobox/_combobox.clarity.scss
@@ -55,7 +55,7 @@
     @include css-var(font-size, clr-combobox-font-size, $clr-combobox-font-size, $clr-use-custom-properties);
 
     &.multi {
-      min-width: $clr-ng-multiselect-min-width;
+      min-width: calc(min($clr-ng-multiselect-min-width, 100%));
       padding-bottom: $clr_baselineRem_0_125;
     }
 

diff --git a/projects/angular/src/forms/combobox/options.ts b/projects/angular/src/forms/combobox/options.ts
@@ -134,6 +134,11 @@ export class ClrOptions<T> implements AfterViewInit, LoadingListener, OnDestroy
         ) {
           this.toggleService.open = false;
         }
+      }),
+      this.items.changes.subscribe(() => {
+        setTimeout(() => {
+          this.focusHandler.focusFirstActive();
+        });
       })
     );
   }

diff --git a/projects/angular/src/forms/combobox/providers/combobox-focus-handler.service.ts b/projects/angular/src/forms/combobox/providers/combobox-focus-handler.service.ts
@@ -201,7 +201,13 @@ export class ComboboxFocusHandler<T> {
           firstActive = this.selectionService.selectionModel.model as T;
         }
         const activeProxy = this.optionData.find(option => option.value === firstActive);
-        this.pseudoFocus.select(activeProxy);
+        if (activeProxy) {
+          // active element is visible
+          this.pseudoFocus.select(activeProxy);
+        } else {
+          // we have active element, but it's filtered out
+          this.pseudoFocus.select(this.optionData[0]);
+        }
       }
     }
   }