fix(select): two elements with focus frame (#DS-3407) (#826)

Author: lskramarov

packages/components/core/select/common.ts

@@ -1,5 +1,5 @@
 import { CdkConnectedOverlay } from '@angular/cdk/overlay';
-import { AfterContentInit, Directive, Inject, OnDestroy, Optional } from '@angular/core';
+import { AfterContentInit, Directive, EventEmitter, Inject, OnDestroy, Optional } from '@angular/core';
 import { END, ESCAPE, HOME, SPACE } from '@koobiq/cdk/keycodes';
 import { Subscription } from 'rxjs';
 import { KBQ_FORM_FIELD_REF, KbqFormFieldRef } from '../form-field';
@@ -33,14 +33,16 @@ export class KbqSelectFooter {}
     }
 })
 export class KbqSelectSearch implements AfterContentInit, OnDestroy {
-    searchChangesSubscription: Subscription = new Subscription();
+    readonly changes: EventEmitter<string> = new EventEmitter<string>();
 
     isSearchChanged: boolean = false;
 
     get ngControl() {
         return this.formField.control.ngControl;
     }
 
+    private searchChangesSubscription: Subscription = new Subscription();
+
     constructor(@Optional() @Inject(KBQ_FORM_FIELD_REF) protected formField: KbqFormFieldRef) {
         formField.canCleanerClearByEsc = false;
     }
@@ -75,8 +77,9 @@ export class KbqSelectSearch implements AfterContentInit, OnDestroy {
         }
 
         Promise.resolve().then(() => {
-            this.searchChangesSubscription = this.ngControl.valueChanges!.subscribe(() => {
+            this.searchChangesSubscription = this.ngControl.valueChanges!.subscribe((value) => {
                 this.isSearchChanged = true;
+                this.changes.next(value);
             });
         });
     }

packages/components/select/select.component.ts

@@ -525,7 +525,7 @@ export class KbqSelect
     }
 
     get empty(): boolean {
-        return !this.selectionModel || this.selectionModel.isEmpty();
+        return !!this.selectionModel?.isEmpty();
     }
 
     get firstSelected(): KbqOptionBase | null {
@@ -639,6 +639,14 @@ export class KbqSelect
             this.resetOptions();
             this.initializeSelection();
         });
+
+        this.search?.changes
+            .pipe(
+                takeUntilDestroyed(this.destroyRef),
+                delay(0),
+                filter(() => !this.keyManager.activeItem)
+            )
+            .subscribe(() => this.keyManager.updateActiveItem(0));
     }
 
     ngAfterViewInit(): void {
@@ -1235,12 +1243,6 @@ export class KbqSelect
             .subscribe((event) => {
                 this.onSelect(event.source, event.isUserInput);
 
-                if (this.search && this.search.isSearchChanged) {
-                    Promise.resolve().then(() => this.keyManager.updateActiveItem(0));
-
-                    this.search.isSearchChanged = false;
-                }
-
                 if (event.isUserInput && !this.multiple && this.panelOpen) {
                     this.close();
                     this.focus();

tools/public_api_guard/components/core.api.md

@@ -2507,6 +2507,8 @@ export function kbqSelectScrollStrategyProviderFactory(overlay: Overlay): () =>
 export class KbqSelectSearch implements AfterContentInit, OnDestroy {
     constructor(formField: KbqFormFieldRef);
     // (undocumented)
+    readonly changes: EventEmitter<string>;
+    // (undocumented)
     focus(): void;
     // (undocumented)
     protected formField: KbqFormFieldRef;
@@ -2525,8 +2527,6 @@ export class KbqSelectSearch implements AfterContentInit, OnDestroy {
     // (undocumented)
     reset(): void;
     // (undocumented)
-    searchChangesSubscription: Subscription;
-    // (undocumented)
     setPlaceholder(value: string): void;
     // (undocumented)
     value(): any;