Merge pull request #12599 from vvlladd28/bug/dashboard-autocomplete/cached-result

Fixed unclear cached result in dashboard autocomplete when changing user

ui-ngx/src/app/shared/components/dashboard-autocomplete.component.html

@@ -31,7 +31,9 @@
          [required]="required"
          [matAutocomplete]="dashboardAutocomplete"
          [class.!hidden]="useDashboardLink && disabled && selectDashboardFormGroup.get('dashboard').value">
-  <a *ngIf="useDashboardLink && selectDashboardFormGroup.get('dashboard').value && disabled" aria-label="Open device profile" [routerLink]=dashboardURL>
+  <a *ngIf="useDashboardLink && selectDashboardFormGroup.get('dashboard').value && disabled"
+     [attr.aria-label]="'dashboard.open-dashboard' | translate"
+     [routerLink]=dashboardURL>
     {{ displayDashboardFn(selectDashboardFormGroup.get('dashboard').value) | customTranslate }}
   </a>
   <button *ngIf="selectDashboardFormGroup.get('dashboard').value && !disabled"

ui-ngx/src/app/shared/components/dashboard-autocomplete.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { AfterViewInit, Component, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
 import {
   ControlValueAccessor,
   NG_VALUE_ACCESSOR,
@@ -25,7 +25,7 @@ import {
 import { Observable, of } from 'rxjs';
 import { PageLink } from '@shared/models/page/page-link';
 import { Direction } from '@shared/models/page/sort-order';
-import { catchError, debounceTime, distinctUntilChanged, map, share, switchMap, tap } from 'rxjs/operators';
+import { catchError, debounceTime, map, share, switchMap, tap } from 'rxjs/operators';
 import { emptyPageData, PageData } from '@shared/models/page/page-data';
 import { DashboardInfo } from '@app/shared/models/dashboard.models';
 import { DashboardService } from '@core/http/dashboard.service';
@@ -39,6 +39,7 @@ import { getEntityDetailsPageURL } from '@core/utils';
 import { EntityType } from '@shared/models/entity-type.models';
 import { AuthUser } from '@shared/models/user.model';
 import { coerceBoolean } from '@shared/decorators/coercion';
+import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
 
 @Component({
   selector: 'tb-dashboard-autocomplete',
@@ -50,7 +51,7 @@ import { coerceBoolean } from '@shared/decorators/coercion';
     multi: true
   }]
 })
-export class DashboardAutocompleteComponent implements ControlValueAccessor, OnInit, AfterViewInit {
+export class DashboardAutocompleteComponent implements ControlValueAccessor, OnInit {
 
   private dirty = false;
 
@@ -103,6 +104,7 @@ export class DashboardAutocompleteComponent implements ControlValueAccessor, OnI
   disabled: boolean;
 
   @ViewChild('dashboardInput', {static: true}) dashboardInput: ElementRef;
+  @ViewChild('dashboardInput', {read: MatAutocompleteTrigger, static: true}) dashboardAutocomplete: MatAutocompleteTrigger;
 
   filteredDashboards: Observable<Array<DashboardInfo>>;
 
@@ -151,16 +153,11 @@ export class DashboardAutocompleteComponent implements ControlValueAccessor, OnI
           this.updateView(modelValue);
         }),
         map(value => value ? (typeof value === 'string' ? value : value.name) : ''),
-        distinctUntilChanged(),
         switchMap(name => this.fetchDashboards(name) ),
         share()
       );
   }
 
-  ngAfterViewInit(): void {
-    // this.selectFirstDashboardIfNeeded();
-  }
-
   selectFirstDashboardIfNeeded(): void {
     if (this.selectFirstDashboard && !this.modelValue) {
       this.getDashboards(new PageLink(1, 0, null, {
@@ -183,6 +180,7 @@ export class DashboardAutocompleteComponent implements ControlValueAccessor, OnI
     this.disabled = isDisabled;
     if (this.disabled) {
       this.selectDashboardFormGroup.disable({emitEvent: false});
+      this.dashboardAutocomplete.closePanel();
     } else {
       this.selectDashboardFormGroup.enable({emitEvent: false});
     }