From 3ae3c7f51e1317ef461da1fa43f9750327d5f429 Mon Sep 17 00:00:00 2001
From: Satpal Tanan <satpal.tanan@extremereach.com>
Date: Sun, 13 Aug 2023 17:52:19 +0100
Subject: [PATCH] minor fix

---
 .../lib/ngx-mat-intl-tel-input.component.html | 44 ++++++++++---------
 .../lib/ngx-mat-intl-tel-input.component.scss |  4 ++
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/projects/ngx-mat-intl-tel-input/src/lib/ngx-mat-intl-tel-input.component.html b/projects/ngx-mat-intl-tel-input/src/lib/ngx-mat-intl-tel-input.component.html
index 4d90f6942..a7313287a 100644
--- a/projects/ngx-mat-intl-tel-input/src/lib/ngx-mat-intl-tel-input.component.html
+++ b/projects/ngx-mat-intl-tel-input/src/lib/ngx-mat-intl-tel-input.component.html
@@ -11,13 +11,13 @@
       [ngClass]="selectedCountry?.flagClass"
     ></span>
     <span class="country-selector-code" *ngIf="selectedCountry?.dialCode"
-      >+{{ selectedCountry.dialCode }}</span
+    >+{{ selectedCountry.dialCode }}</span
     >
   </button>
   <mat-menu #menu="matMenu"
-    class="ngx-mat-tel-input-mat-menu-panel"
-    backdropClass="ngx-mat-tel-input-overlay-backdrop"
-    overlayPanelClass="ngx-mat-tel-input-overlay-pane">
+            class="ngx-mat-tel-input-mat-menu-panel"
+            backdropClass="ngx-mat-tel-input-overlay-backdrop"
+            overlayPanelClass="ngx-mat-tel-input-overlay-pane">
     <input
       *ngIf="enableSearch"
       class="country-search"
@@ -26,22 +26,24 @@
       [placeholder]="searchPlaceholder"
       (click)="$event.stopPropagation()"
     />
-    <button
-      type="button"
-      mat-menu-item
-      class="country-list-button"
-      *ngFor="let country of preferredCountriesInDropDown"
-      (click)="onCountrySelect(country, focusable)"
-    >
-      <div class="icon-wrapper">
-        <div class="flag" [ngClass]="country.flagClass"></div>
-      </div>
-      <div class="label-wrapper">
-        {{ country.name }}
-        <span *ngIf="country?.dialCode">+{{ country.dialCode }}</span>
-      </div>
-    </button>
-    <mat-divider *ngIf="preferredCountriesInDropDown?.length"></mat-divider>
+    <ng-container *ngIf="!searchCriteria">
+      <button
+        type="button"
+        mat-menu-item
+        class="country-list-button"
+        *ngFor="let country of preferredCountriesInDropDown"
+        (click)="onCountrySelect(country, focusable)"
+      >
+        <div class="icon-wrapper">
+          <div class="flag" [ngClass]="country.flagClass"></div>
+        </div>
+        <div class="label-wrapper">
+          {{ country.name }}
+          <span *ngIf="country?.dialCode">+{{ country.dialCode }}</span>
+        </div>
+      </button>
+      <mat-divider *ngIf="preferredCountriesInDropDown?.length"></mat-divider>
+    </ng-container>
     <ng-container *ngFor="let country of allCountries">
       <button
         type="button"
@@ -63,7 +65,7 @@
   <input
     matInput
     type="tel"
-    autocomplete="off"
+    autocomplete="tel"
     [ngClass]="cssClass"
     (blur)="onTouched()"
     (keypress)="onInputKeyPress($event)"
diff --git a/projects/ngx-mat-intl-tel-input/src/lib/ngx-mat-intl-tel-input.component.scss b/projects/ngx-mat-intl-tel-input/src/lib/ngx-mat-intl-tel-input.component.scss
index 58f824c03..b383dcd87 100644
--- a/projects/ngx-mat-intl-tel-input/src/lib/ngx-mat-intl-tel-input.component.scss
+++ b/projects/ngx-mat-intl-tel-input/src/lib/ngx-mat-intl-tel-input.component.scss
@@ -26,6 +26,10 @@ input {
     border-bottom: 1px solid #ddd;
     font-size: 14px;
     padding: 20px 20px 24px;
+    position: sticky;
+    top: 0;
+    background-color: #fff;
+    z-index: 9;
   }
 }
 .icon-wrapper {