diff --git a/projects/angular/src/forms/combobox/_combobox.clarity.scss b/projects/angular/src/forms/combobox/_combobox.clarity.scss index de30af2e04..36d24d8e9b 100644 --- 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 index 5e475c952b..3ff8b0b134 100644 --- a/projects/angular/src/forms/combobox/options.ts +++ b/projects/angular/src/forms/combobox/options.ts @@ -134,6 +134,11 @@ export class ClrOptions 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 index 5f9955ee44..a7979d1cd7 100644 --- 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 { 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]); + } } } }