@shival99/z-ui 2.5.9 → 2.5.11

package/fesm2022/shival99-z-ui-components-z-autocomplete.mjs

@@ -239,6 +239,7 @@ class ZAutocompleteComponent {
         count: this.filteredOptions().length,
         estimateSize: () => this.effectiveOptionHeight(),
         measureElement: (element) => element.getBoundingClientRect().height,
+        gap: 3,
         overscan: 5,
         useApplicationRefTick: false,
     }));
@@ -426,6 +427,7 @@ class ZAutocompleteComponent {
     _onTouched = () => void 0;
     _ngControl = null;
     _isNavigationFilling = false;
+    _hasPendingInput = false;
     constructor() {
         effect(onCleanup => {
             const triggerEl = this.triggerRef()?.nativeElement;
@@ -534,6 +536,7 @@ class ZAutocompleteComponent {
         this._value.set(value ?? '');
         this.inputValue.set(value ?? '');
         this.debouncedQuery.set(value ?? '');
+        this._hasPendingInput = false;
         if (this.zType() === 'address_bar') {
             this.searchQuery.set(value ?? '');
         }
@@ -553,6 +556,7 @@ class ZAutocompleteComponent {
         this._pendingSearch.set(false);
         this.inputValue.set(value);
         this._value.set(value);
+        this._hasPendingInput = true;
         this.uiState.update(s => ({ ...s, dirty: true }));
         this._onChange(value);
         if (!this._isNavigationFilling) {
@@ -649,6 +653,10 @@ class ZAutocompleteComponent {
                 event.preventDefault();
                 if (isAddressBarMode && this._valueBeforeNavigation !== null) {
                     this._revertToValueBeforeNavigation();
+                    this._hasPendingInput = false;
+                }
+                else {
+                    this._cancelPendingInput();
                 }
                 this._valueBeforeNavigation = null;
                 this._closePanel();
@@ -721,6 +729,7 @@ class ZAutocompleteComponent {
         }, 0);
     }
     _resetInput() {
+        this._hasPendingInput = false;
         if (!this.zResetOnSelect()) {
             this._closePanel();
             this.activeIndex.set(-1);
@@ -755,6 +764,7 @@ class ZAutocompleteComponent {
         }, 50);
     }
     onPopoverHideStart() {
+        this._cancelPendingInput();
         this._openRequested = false;
         this.uiState.update(s => ({ ...s, isOpen: false }));
         this.activeIndex.set(-1);
@@ -779,6 +789,7 @@ class ZAutocompleteComponent {
         this.zOnSelect.emit(option);
         this._selectedOption.set(option);
         const newValue = this.zResetOnSelect() ? '' : option.label;
+        this._hasPendingInput = false;
         this.inputValue.set(newValue);
         this._value.set(newValue);
         this.debouncedQuery.set(newValue);
@@ -793,6 +804,7 @@ class ZAutocompleteComponent {
     clearInput(event) {
         event.stopPropagation();
         event.preventDefault();
+        this._hasPendingInput = false;
         this.inputValue.set('');
         this._value.set('');
         this.uiState.update(s => ({ ...s, dirty: true }));
@@ -833,9 +845,14 @@ class ZAutocompleteComponent {
         this.inputRef()?.nativeElement.blur();
     }
     clear() {
+        this._hasPendingInput = false;
         this.inputValue.set('');
         this._value.set('');
         this.debouncedQuery.set('');
+        const inputEl = this.inputRef()?.nativeElement;
+        if (inputEl) {
+            inputEl.value = '';
+        }
         this._onChange('');
         this.zValueChange.emit('');
         this._selectedOption.set(null);
@@ -858,6 +875,7 @@ class ZAutocompleteComponent {
         this._closePanel();
     }
     setValue(value) {
+        this._hasPendingInput = false;
         this._value.set(value);
         this.inputValue.set(value);
         this.debouncedQuery.set(value);
@@ -877,6 +895,13 @@ class ZAutocompleteComponent {
     _closePanel() {
         this._popoverControl()?.close();
     }
+    _cancelPendingInput() {
+        if (!this._hasPendingInput) {
+            return;
+        }
+        this._hasPendingInput = false;
+        this.clear();
+    }
     _setupDebounce() {
         this._query$
             .pipe(debounceTime(this.effectiveDebounceTime()), distinctUntilChanged(), takeUntilDestroyed(this._destroyRef))