From 48c31e47b9743baedc64424d69130430fd41e1e7 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 14 Jan 2026 12:59:23 +0200
Subject: [PATCH 1/3] UI: Fixed autofill country autocomplete and improved
 validation

---
 ui-ngx/src/app/core/utils.ts                  | 14 ++++++-
 .../country-autocomplete.component.html       | 13 ++++++-
 .../country-autocomplete.component.scss       | 27 +++++++++++++
 .../country-autocomplete.component.ts         | 39 ++++++++++++++++---
 .../assets/locale/locale.constant-en_US.json  |  1 +
 5 files changed, 85 insertions(+), 9 deletions(-)
 create mode 100644 ui-ngx/src/app/shared/components/country-autocomplete.component.scss

diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts
index f1a0671a52..e0665d4eb1 100644
--- a/ui-ngx/src/app/core/utils.ts
+++ b/ui-ngx/src/app/core/utils.ts
@@ -27,13 +27,14 @@ import { serverErrorCodesTranslations } from '@shared/models/constants';
 import { SubscriptionEntityInfo } from '@core/api/widget-api.models';
 import {
   CompiledTbFunction,
-  compileTbFunction, GenericFunction,
+  compileTbFunction,
+  GenericFunction,
   isNotEmptyTbFunction,
   TbFunction
 } from '@shared/models/js-function.models';
 import { DomSanitizer } from '@angular/platform-browser';
 import { SecurityContext } from '@angular/core';
-import { AbstractControl, ValidationErrors, Validators } from '@angular/forms';
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
 
 const varsRegex = /\${([^}]*)}/g;
 const emailRegex = /^[A-Z0-9_!#$%&'*+/=?`{|}~^.-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
@@ -998,3 +999,12 @@ export const validateEmail = (control: AbstractControl): ValidationErrors | null
   return emailRegex.test(control.value) ? null : {email: true};
 };
 
+export const requireMatch = (): ValidatorFn => {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const value = control.value;
+    if (value && typeof value === 'string') {
+      return { requireMatch: { value: value } };
+    }
+    return null;
+  };
+}
diff --git a/ui-ngx/src/app/shared/components/country-autocomplete.component.html b/ui-ngx/src/app/shared/components/country-autocomplete.component.html
index 9b3857cafb..61a874431a 100644
--- a/ui-ngx/src/app/shared/components/country-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/country-autocomplete.component.html
@@ -15,13 +15,19 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="countryFormGroup" class="mat-block" subscriptSizing="{{subscriptSizing}}" [appearance]="appearance">
+<mat-form-field [formGroup]="countryFormGroup" class="mat-block" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
   <mat-label>{{ labelText }}</mat-label>
+  @if (countryFormGroup.get('country').value?.flag) {
+    <span matPrefix>
+      {{ countryFormGroup.get('country').value.flag }}
+    </span>
+  }
   <input matInput type="text"
          #countryInput
+         #autocompleteTrigger="matAutocompleteTrigger"
          formControlName="country"
          (focusin)="onFocus()"
-         (blur)="onTouched()"
+         (blur)="checkInputAndAutoSelect()"
          [required]="required"
          [matAutocomplete]="countryAutocomplete">
   <button *ngIf="countryFormGroup.get('country').value && !disabled"
@@ -55,4 +61,7 @@
   <mat-error *ngIf="countryFormGroup.get('country').hasError('required')">
     {{ requiredText }}
   </mat-error>
+  <mat-error *ngIf="countryFormGroup.get('country').hasError('requireMatch')">
+    {{ requiredMatchText }}
+  </mat-error>
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/country-autocomplete.component.scss b/ui-ngx/src/app/shared/components/country-autocomplete.component.scss
new file mode 100644
index 0000000000..d1034b57f8
--- /dev/null
+++ b/ui-ngx/src/app/shared/components/country-autocomplete.component.scss
@@ -0,0 +1,27 @@
+/**
+ * Copyright © 2016-2026 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+:host ::ng-deep {
+  .mat-form-field-appearance-fill {
+    .mat-mdc-form-field-icon-prefix {
+      align-self: baseline;
+
+      & > * {
+        color: initial;
+        padding-left: 8px;
+      }
+    }
+  }
+}
diff --git a/ui-ngx/src/app/shared/components/country-autocomplete.component.ts b/ui-ngx/src/app/shared/components/country-autocomplete.component.ts
index e7720c8b9e..540a0f08cd 100644
--- a/ui-ngx/src/app/shared/components/country-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/country-autocomplete.component.ts
@@ -23,14 +23,16 @@ import {
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
-  Validator
+  Validator,
+  Validators
 } from '@angular/forms';
-import { isNotEmptyStr } from '@core/utils';
+import { isNotEmptyStr, requireMatch } from '@core/utils';
 import { Observable, of } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map, share, switchMap, tap } from 'rxjs/operators';
-import { SubscriptSizing, MatFormFieldAppearance } from '@angular/material/form-field';
+import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { TranslateService } from '@ngx-translate/core';
+import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
 
 interface CountrySearchData extends Country {
   searchText?: string;
@@ -39,6 +41,7 @@ interface CountrySearchData extends Country {
 @Component({
   selector: 'tb-country-autocomplete',
   templateUrl: 'country-autocomplete.component.html',
+  styleUrls: ['./country-autocomplete.component.scss'],
   providers: [
     CountryData,
     {
@@ -61,6 +64,9 @@ export class CountryAutocompleteComponent implements OnInit, ControlValueAccesso
   @Input()
   requiredText = this.translate.instant('contact.country-required');
 
+  @Input()
+  requiredMatchText = this.translate.instant('contact.country-required-match');
+
   @Input()
   autocompleteHint: string;
 
@@ -79,6 +85,8 @@ export class CountryAutocompleteComponent implements OnInit, ControlValueAccesso
 
   @ViewChild('countryInput', {static: true}) countryInput: ElementRef;
 
+  @ViewChild('autocompleteTrigger') autocompleteTrigger: MatAutocompleteTrigger;
+
   @Output()
   selectCountryCode = new EventEmitter<string>();
 
@@ -103,11 +111,15 @@ export class CountryAutocompleteComponent implements OnInit, ControlValueAccesso
               private countryData: CountryData,
               private translate: TranslateService) {
     this.countryFormGroup = this.fb.group({
-      country: ['']
+      country: ['', requireMatch()]
     });
   }
 
   ngOnInit(): void {
+    if (this.required) {
+      this.countryFormGroup.get('country').addValidators(Validators.required);
+      this.countryFormGroup.get('country').updateValueAndValidity();
+    }
     this.filteredCountries = this.countryFormGroup.get('country').valueChanges.pipe(
       debounceTime(150),
       tap(value => {
@@ -163,7 +175,7 @@ export class CountryAutocompleteComponent implements OnInit, ControlValueAccesso
   }
 
   displayCountryFn(country?: Country): string | undefined {
-    return country ? `${country.flag} ${country.name}` : undefined;
+    return country ? country.name : undefined;
   }
 
   onFocus() {
@@ -173,6 +185,23 @@ export class CountryAutocompleteComponent implements OnInit, ControlValueAccesso
     }
   }
 
+  checkInputAndAutoSelect() {
+    const control = this.countryFormGroup.get('country');
+    const value = control.value;
+
+    if (value && typeof value === 'string') {
+      const filterValue = value.trim().toLowerCase();
+      const foundCountry = this.allCountries.find(c => c.name.toLowerCase() === filterValue);
+
+      if (foundCountry) {
+        control.setValue(foundCountry);
+        this.autocompleteTrigger.closePanel();
+      }
+    }
+
+    this.onTouched();
+  }
+
   textIsNotEmpty(text: string): boolean {
     return (text && text.length > 0);
   }
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 54ea5737f7..80395efea2 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -1194,6 +1194,7 @@
     "contact": {
         "country": "Country",
         "country-required": "Country is required.",
+        "country-required-match": "Please select a valid country from the list.",
         "city": "City",
         "state": "State / Province",
         "postal-code": "Zip / Postal Code",

From 6f03b8ae2f424745aad53d553f3208ca199d7eba Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 14 Jan 2026 14:04:05 +0200
Subject: [PATCH 2/3] UI: Fixed country autocomplete after review

---
 ui-ngx/src/app/core/utils.ts                  |  6 +--
 .../country-autocomplete.component.html       |  4 +-
 .../country-autocomplete.component.scss       | 10 ++--
 .../country-autocomplete.component.ts         | 49 +++++++++++++------
 .../assets/locale/locale.constant-en_US.json  |  2 +-
 5 files changed, 46 insertions(+), 25 deletions(-)

diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts
index e0665d4eb1..4c7a241931 100644
--- a/ui-ngx/src/app/core/utils.ts
+++ b/ui-ngx/src/app/core/utils.ts
@@ -999,11 +999,11 @@ export const validateEmail = (control: AbstractControl): ValidationErrors | null
   return emailRegex.test(control.value) ? null : {email: true};
 };
 
-export const requireMatch = (): ValidatorFn => {
+export const objectRequired = (): ValidatorFn => {
   return (control: AbstractControl): ValidationErrors | null => {
     const value = control.value;
-    if (value && typeof value === 'string') {
-      return { requireMatch: { value: value } };
+    if (value && !isObject(value)) {
+      return { objectRequired: true };
     }
     return null;
   };
diff --git a/ui-ngx/src/app/shared/components/country-autocomplete.component.html b/ui-ngx/src/app/shared/components/country-autocomplete.component.html
index 61a874431a..16018c7e75 100644
--- a/ui-ngx/src/app/shared/components/country-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/country-autocomplete.component.html
@@ -61,7 +61,7 @@
   <mat-error *ngIf="countryFormGroup.get('country').hasError('required')">
     {{ requiredText }}
   </mat-error>
-  <mat-error *ngIf="countryFormGroup.get('country').hasError('requireMatch')">
-    {{ requiredMatchText }}
+  <mat-error *ngIf="countryFormGroup.get('country').hasError('objectRequired')">
+    {{ objectRequiredText }}
   </mat-error>
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/country-autocomplete.component.scss b/ui-ngx/src/app/shared/components/country-autocomplete.component.scss
index d1034b57f8..72de6174ba 100644
--- a/ui-ngx/src/app/shared/components/country-autocomplete.component.scss
+++ b/ui-ngx/src/app/shared/components/country-autocomplete.component.scss
@@ -17,11 +17,13 @@
   .mat-form-field-appearance-fill {
     .mat-mdc-form-field-icon-prefix {
       align-self: baseline;
+    }
+  }
 
-      & > * {
-        color: initial;
-        padding-left: 8px;
-      }
+  .mat-mdc-form-field-icon-prefix {
+    & > * {
+      color: initial;
+      padding-left: 8px;
     }
   }
 }
diff --git a/ui-ngx/src/app/shared/components/country-autocomplete.component.ts b/ui-ngx/src/app/shared/components/country-autocomplete.component.ts
index 540a0f08cd..4bc49bbbb0 100644
--- a/ui-ngx/src/app/shared/components/country-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/country-autocomplete.component.ts
@@ -14,7 +14,18 @@
 /// limitations under the License.
 ///
 
-import { Component, ElementRef, EventEmitter, forwardRef, Input, OnInit, Output, ViewChild } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  forwardRef,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewChild
+} from '@angular/core';
 import { Country, CountryData } from '@shared/models/country.models';
 import {
   ControlValueAccessor,
@@ -26,7 +37,7 @@ import {
   Validator,
   Validators
 } from '@angular/forms';
-import { isNotEmptyStr, requireMatch } from '@core/utils';
+import { isNotEmptyStr, objectRequired } from '@core/utils';
 import { Observable, of } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map, share, switchMap, tap } from 'rxjs/operators';
 import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
@@ -56,7 +67,7 @@ interface CountrySearchData extends Country {
     }
   ]
 })
-export class CountryAutocompleteComponent implements OnInit, ControlValueAccessor, Validator {
+export class CountryAutocompleteComponent implements OnInit, OnChanges, ControlValueAccessor, Validator {
 
   @Input()
   labelText = this.translate.instant('contact.country');
@@ -65,7 +76,7 @@ export class CountryAutocompleteComponent implements OnInit, ControlValueAccesso
   requiredText = this.translate.instant('contact.country-required');
 
   @Input()
-  requiredMatchText = this.translate.instant('contact.country-required-match');
+  objectRequiredText = this.translate.instant('contact.country-object-required');
 
   @Input()
   autocompleteHint: string;
@@ -111,15 +122,25 @@ export class CountryAutocompleteComponent implements OnInit, ControlValueAccesso
               private countryData: CountryData,
               private translate: TranslateService) {
     this.countryFormGroup = this.fb.group({
-      country: ['', requireMatch()]
+      country: ['', objectRequired()]
     });
   }
 
-  ngOnInit(): void {
-    if (this.required) {
-      this.countryFormGroup.get('country').addValidators(Validators.required);
-      this.countryFormGroup.get('country').updateValueAndValidity();
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.required) {
+      const requiredChanges = changes.required;
+      if (requiredChanges.currentValue !== requiredChanges.previousValue) {
+        if (requiredChanges.currentValue) {
+          this.countryFormGroup.get('country').addValidators(Validators.required);
+        } else {
+          this.countryFormGroup.get('country').removeValidators(Validators.required);
+        }
+        this.countryFormGroup.get('country').updateValueAndValidity();
+      }
     }
+  }
+
+  ngOnInit(): void {
     this.filteredCountries = this.countryFormGroup.get('country').valueChanges.pipe(
       debounceTime(150),
       tap(value => {
@@ -190,12 +211,10 @@ export class CountryAutocompleteComponent implements OnInit, ControlValueAccesso
     const value = control.value;
 
     if (value && typeof value === 'string') {
-      const filterValue = value.trim().toLowerCase();
-      const foundCountry = this.allCountries.find(c => c.name.toLowerCase() === filterValue);
-
-      if (foundCountry) {
-        control.setValue(foundCountry);
-        this.autocompleteTrigger.closePanel();
+      const foundCountry = this.fetchCountries(value);
+      if (foundCountry.length === 1) {
+        control.setValue(foundCountry[0]);
+        this.autocompleteTrigger?.closePanel();
       }
     }
 
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 80395efea2..6b70ac45d6 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -1194,7 +1194,7 @@
     "contact": {
         "country": "Country",
         "country-required": "Country is required.",
-        "country-required-match": "Please select a valid country from the list.",
+        "country-object-required": "Please select a valid country from the list.",
         "city": "City",
         "state": "State / Province",
         "postal-code": "Zip / Postal Code",

From c3d1b1ad6f58badd6bb693b4a755b0d64c096ad2 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 14 Jan 2026 17:44:40 +0200
Subject: [PATCH 3/3] UI: Fixed country autocomplete after review

---
 .../app/shared/components/country-autocomplete.component.html    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui-ngx/src/app/shared/components/country-autocomplete.component.html b/ui-ngx/src/app/shared/components/country-autocomplete.component.html
index 16018c7e75..befb160df6 100644
--- a/ui-ngx/src/app/shared/components/country-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/country-autocomplete.component.html
@@ -28,7 +28,6 @@
          formControlName="country"
          (focusin)="onFocus()"
          (blur)="checkInputAndAutoSelect()"
-         [required]="required"
          [matAutocomplete]="countryAutocomplete">
   <button *ngIf="countryFormGroup.get('country').value && !disabled"
           type="button"