@siemens/element-ng 51.5.0 → 51.6.0

package/fesm2022/siemens-element-ng-filtered-search.mjs

@@ -1,6 +1,6 @@
 import { formatDate, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, model, output, viewChild, inject, Injector, afterNextRender, computed, Component, signal, Directive, LOCALE_ID, DestroyRef, untracked, booleanAttribute, ElementRef, viewChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { input, model, output, viewChild, inject, Injector, computed, afterNextRender, Component, signal, Directive, LOCALE_ID, DestroyRef, untracked, booleanAttribute, ElementRef, viewChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { elementCancel, elementSearch } from '@siemens/element-icons';
 import { defaultConnectedOverlayScrollStrategyFactory, isRTL } from '@siemens/element-ng/common';
@@ -128,7 +128,7 @@ class SiFilteredSearchInputComponent {
     /** Public method to focus the input element */
     focus() {
         this.inputElement().nativeElement.focus();
-        afterNextRender(() => this.typeahead().updateOverlayPosition(), { injector: this.injector });
+        this.updateOverlayPositionAfterRender();
     }
     typeaheadCreateOption = computed(() => this.freeTextCriterion() && !this.maxCriteriaReached() && this.allowFreeText()
         ? this.searchForFreeTextLabel()
@@ -149,6 +149,7 @@ class SiFilteredSearchInputComponent {
         }
         const tokens = inputElement.value.split(';');
         let consumedTokenCount = 0;
+        let createdCriterion = false;
         for (const [index, token] of tokens.entries()) {
             const isLastToken = index === tokens.length - 1;
             const criterionMatch = token.match(SiFilteredSearchInputComponent.criterionRegex);
@@ -168,10 +169,14 @@ class SiFilteredSearchInputComponent {
             if (!accepted) {
                 break;
             }
+            createdCriterion = true;
             consumedTokenCount++;
         }
         inputElement.value = tokens.slice(consumedTokenCount).join(';');
         this.searchValue.set(inputElement.value);
+        if (createdCriterion) {
+            this.updateOverlayPositionAfterRender();
+        }
     }
     freeTextBlurHandler() {
         queueMicrotask(() => {
@@ -195,6 +200,14 @@ class SiFilteredSearchInputComponent {
             this.searchValue.set('');
         }
     }
+    updateOverlayPositionAfterRender() {
+        afterNextRender(() => {
+            if (this.inputElement().nativeElement.matches(':focus')) {
+                this.inputElement().nativeElement.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            }
+            this.typeahead().updateOverlayPosition();
+        }, { injector: this.injector });
+    }
     requestCriterionByName(criterionMatch, editOnCreation) {
         let accepted = false;
         this.createCriterionByName.emit({
@@ -452,12 +465,13 @@ class SiFilteredSearchOptionValueBase extends SiFilteredSearchValueBase {
         if (initialValue.value?.length) {
             // Emit normalization after initialization, not during change detection.
             this.options()
-                .pipe(take(1), observeOn(asapScheduler), takeUntilDestroyed(this.destroyRef))
-                .subscribe(options => {
+                .pipe(take(1), map(options => this.criterionValue() === initialValue
+                ? this.processTypeaheadOptions(options)
+                : undefined), observeOn(asapScheduler), takeUntilDestroyed(this.destroyRef))
+                .subscribe(value => {
                 if (this.criterionValue() !== initialValue) {
                     return;
                 }
-                const value = this.processTypeaheadOptions(options);
                 if (value !== undefined) {
                     this.criterionValue.set({ ...initialValue, value });
                 }