From 806d46214e12be729b2bdd634924688311685eb9 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 7 Jul 2021 17:38:51 +0300
Subject: [PATCH] UI: Improvement added chip after blur input

---
 .../profile/alarm/device-profile-alarm.component.html         | 4 ++--
 .../modules/home/components/widget/data-keys.component.html   | 1 +
 .../components/widget/lib/alarm-filter-panel.component.html   | 2 +-
 .../home/components/widget/widget-config.component.html       | 2 +-
 .../modules/home/pages/rulechain/link-labels.component.html   | 1 +
 .../shared/components/entity/entity-keys-list.component.html  | 1 +
 .../components/entity/entity-subtype-list.component.html      | 1 +
 7 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
index 277ec252a2..54be7923e3 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html
@@ -73,8 +73,8 @@
                      style="max-width: 200px;"
                      [matChipInputFor]="relationTypesChipList"
                      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-                     (matChipInputTokenEnd)="addRelationType($event)"
-                     [matChipInputAddOnBlur]="true">
+                     matChipInputAddOnBlur
+                     (matChipInputTokenEnd)="addRelationType($event)">
             </mat-chip-list>
             <mat-hint innerHTML="{{ 'device-profile.alarm-rule-relation-types-list-hint' | translate }}"></mat-hint>
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.html b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.html
index 03e5abeb3c..4f3d9a7dd8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.html
@@ -86,6 +86,7 @@
            [matAutocompleteDisabled]="isEntityCountDatasource"
            [matChipInputFor]="chipList"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+           matChipInputAddOnBlur
            (matChipInputTokenEnd)="add($event)">
   </mat-chip-list>
   <mat-autocomplete #keyAutocomplete="matAutocomplete"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarm-filter-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/alarm-filter-panel.component.html
index 349b0d31ac..a252d37586 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarm-filter-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarm-filter-panel.component.html
@@ -45,7 +45,7 @@
       <input placeholder="{{ !alarmFilterFormGroup.get('alarmTypeList').value?.length ? ('alarm.any-type' | translate) : '' }}"
              [matChipInputFor]="alarmTypeChipList"
              [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-             [matChipInputAddOnBlur]="true"
+             matChipInputAddOnBlur
              (matChipInputTokenEnd)="addAlarmType($event)">
     </mat-chip-list>
   </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
index 1888c126bc..ed6ef7cd4a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
@@ -73,7 +73,7 @@
               <input placeholder="{{ !dataSettings.get('alarmTypeList').value?.length ? ('alarm.any-type' | translate) : '' }}"
                      [matChipInputFor]="alarmTypeChipList"
                      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-                     [matChipInputAddOnBlur]="true"
+                     matChipInputAddOnBlur
                      (matChipInputTokenEnd)="addAlarmType($event)">
             </mat-chip-list>
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/link-labels.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/link-labels.component.html
index f757b2e873..e222b312ab 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/link-labels.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/link-labels.component.html
@@ -37,6 +37,7 @@
            [matAutocomplete]="labelAutocomplete"
            [matChipInputFor]="chipList"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+           matChipInputAddOnBlur
            (matChipInputTokenEnd)="add($event)">
   </mat-chip-list>
   <mat-autocomplete #labelAutocomplete="matAutocomplete"
diff --git a/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.html b/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.html
index d7f4dd9c45..06a44394e7 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.html
@@ -36,6 +36,7 @@
            [matAutocomplete]="keyAutocomplete"
            [matChipInputFor]="chipList"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+           matChipInputAddOnBlur
            (matChipInputTokenEnd)="add($event)">
   </mat-chip-list>
   <mat-autocomplete #keyAutocomplete="matAutocomplete"
diff --git a/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.html b/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.html
index 44ab2f809a..3a299d8a9f 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.html
@@ -36,6 +36,7 @@
            [matAutocomplete]="entitySubtypeAutocomplete"
            [matChipInputFor]="chipList"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+           matChipInputAddOnBlur
            (matChipInputTokenEnd)="chipAdd($event)">
   </mat-chip-list>
   <mat-autocomplete #entitySubtypeAutocomplete="matAutocomplete"