@fundamental-ngx/cdk 0.63.0-rc.33 → 0.63.0-rc.34

package/fesm2022/fundamental-ngx-cdk-utils.mjs

@@ -652,6 +652,13 @@ class AutoCompleteDirective {
         this._stopKeys = [BACKSPACE, DELETE, ESCAPE];
         /** @hidden */
         this._isComposing = false;
+        /**
+         * Tracks the intended user-typed value, derived from native `input` events.
+         * When Angular's NgModel re-pushes a stale value (e.g. after Ctrl+A → Delete),
+         * the DOM may contain the old model value when the user types the next character.
+         * We reconstruct the intended value using the cursor position and typed character.
+         */
+        this._lastInputEventValue = null;
         /** @hidden */
         this._elementRef = inject(ElementRef);
         /** @hidden */
@@ -667,6 +674,25 @@ class AutoCompleteDirective {
         const keyupEvent = fromEvent(this._elementRef.nativeElement, 'keyup');
         const compositionStartEvent = fromEvent(this._elementRef.nativeElement, 'compositionstart');
         const compositionEndEvent = fromEvent(this._elementRef.nativeElement, 'compositionend');
+        // Track the intended user-typed value. Uses the cursor position and typed character
+        // to reconstruct the value the user intended, independent of any NgModel re-push.
+        fromEvent(this._elementRef.nativeElement, 'input')
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((evt) => {
+            const el = this._elementRef.nativeElement;
+            const cursorPos = el.selectionStart ?? el.value.length;
+            if (evt.inputType === 'insertText' && evt.data) {
+                // Cursor is after the inserted char. Intended value = previously tracked
+                // prefix + new char. Handles the case where NgModel re-pushed a stale
+                // value before this keystroke (e.g. "Apple" after Ctrl+A→Delete→"B").
+                const prev = this._lastInputEventValue ?? '';
+                this._lastInputEventValue = prev + evt.data;
+            }
+            else {
+                // Deletion, paste, or other input — use current DOM value at cursor.
+                this._lastInputEventValue = el.value.substring(0, cursorPos);
+            }
+        });
         keyupEvent.pipe(takeUntilDestroyed()).subscribe((evt) => this._handleKeyboardEvent(evt));
         compositionStartEvent.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
             this._isComposing = true;
@@ -680,7 +706,10 @@ class AutoCompleteDirective {
     _handleKeyboardEvent(event) {
         if (this.enable && !this._isComposing) {
             if (KeyUtil.isKeyCode(event, this._stopKeys)) {
-                this._elementRef.nativeElement.value = this.inputText;
+                const el = this._elementRef.nativeElement;
+                if (el.selectionStart !== el.selectionEnd) {
+                    el.value = this.inputText;
+                }
             }
             else if (KeyUtil.isKeyCode(event, this._completeKeys)) {
                 this._sendCompleteEvent(true);
@@ -689,26 +718,38 @@ class AutoCompleteDirective {
             else if (KeyUtil.isKeyCode(event, this._fillKeys)) {
                 this._sendCompleteEvent(false);
             }
-            else if (!this._isControlKey(event) && this.inputText) {
-                const hasSelection = this._elementRef.nativeElement.selectionStart !== this._elementRef.nativeElement.selectionEnd;
+            else if (!this._isControlKey(event)) {
+                const el = this._elementRef.nativeElement;
+                const hasSelection = el.selectionStart !== el.selectionEnd;
+                // Use the value from the last native `input` event as the authoritative
+                // user-typed value. Angular's NgModel may have re-written el.value with a
+                // stale model value (e.g. after Ctrl+A → Delete), but the native `input`
+                // event only fires on actual user input — not on programmatic writes.
+                const currentNativeValue = this._lastInputEventValue !== null ? this._lastInputEventValue : el.value;
+                // After consuming, keep the current value so the next `input` event's
+                // `insertText` accumulation has the right prefix.
+                this._lastInputEventValue = currentNativeValue;
                 if (hasSelection) {
                     return;
                 }
-                const currentNativeValue = this._elementRef.nativeElement.value;
-                if (this.inputText.length > currentNativeValue.length + 1) {
-                    this.inputText = currentNativeValue;
+                if (!currentNativeValue) {
                     return;
                 }
+                const effectiveInputText = this.inputText.length > currentNativeValue.length + 1 ||
+                    !this.inputText.toLocaleLowerCase().startsWith(currentNativeValue.toLocaleLowerCase())
+                    ? currentNativeValue
+                    : this.inputText;
                 if (!this._triggerTypeAhead()) {
                     return;
                 }
                 this.oldValue = this.inputText;
-                const item = this.options.find((option) => this.matcher(this.displayFn(option).toLocaleLowerCase(), this.inputText.toLocaleLowerCase()));
+                const searchTerm = effectiveInputText || currentNativeValue;
+                const item = this.options.find((option) => this.matcher(this.displayFn(option).toLocaleLowerCase(), searchTerm.toLocaleLowerCase()));
                 if (item) {
                     const displayedValue = this.displayFn(item);
                     // Only autocomplete if the current native value matches the start of the found item
                     if (displayedValue.toLocaleLowerCase().startsWith(currentNativeValue.toLocaleLowerCase())) {
-                        this._typeahead(displayedValue);
+                        this._typeahead(displayedValue, currentNativeValue.length);
                     }
                 }
             }
@@ -716,9 +757,9 @@ class AutoCompleteDirective {
         this.lastKeyUpEvent = event;
     }
     /** @hidden */
-    _typeahead(displayedValue) {
+    _typeahead(displayedValue, currentInputLength) {
         this._elementRef.nativeElement.value = displayedValue;
-        const selectionStartIndex = this.inputText.length;
+        const selectionStartIndex = currentInputLength;
         this._elementRef.nativeElement.setSelectionRange(selectionStartIndex, displayedValue.length);
     }
     /** @hidden */