Browse Source

fix(iot-hub): preserve typed search text when picking an autocomplete result

Drop the (optionSelected) handler and route navigation through the option's (click) instead. Setting [value]="searchText" makes Material write the typed string back through ngModel (a no-op) rather than the MpItemVersionView object, so the input keeps the user's query after the detail dialog closes and searchText.trim() in seeAllResults() stays safe.
pull/15787/head
Igor Kulikov 3 months ago
parent
commit
c7153a5f56
  1. 3
      ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.html
  2. 8
      ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.ts

3
ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.html

@ -78,7 +78,6 @@
<mat-autocomplete #searchAuto="matAutocomplete"
class="tb-search-popup-panel"
[displayWith]="searchDisplayFn"
(optionSelected)="onSearchOptionSelected($event)"
[hideSingleSelectionIndicator]="true">
@if (searchLoading) {
<mat-option [disabled]="true" class="tb-search-popup-loading">
@ -99,7 +98,7 @@
@for (group of searchResultGroups; track group.type) {
<mat-optgroup [label]="getSearchGroupLabel(group.type)">
@for (item of group.items; track item.id) {
<mat-option [value]="item">
<mat-option [value]="searchText" (click)="openItemDetail(item)">
@if (isCompactType(item.type)) {
<div class="tb-search-popup-icon-square" [style.background]="item.color || '#048ad3'">
<tb-icon class="tb-search-popup-icon-inner">{{ getCompactIcon(item) }}</tb-icon>

8
ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.ts

@ -17,7 +17,6 @@
import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
import { Router } from '@angular/router';
import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { BreakpointObserver } from '@angular/cdk/layout';
import { forkJoin, Subject, Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
@ -235,13 +234,6 @@ export class TbIotHubHomeComponent implements OnInit, OnDestroy {
return typeof value === 'string' ? value : this.searchText || '';
};
onSearchOptionSelected(event: MatAutocompleteSelectedEvent): void {
const item = event.option.value as MpItemVersionView;
this.searchText = '';
this.searchAutoTrigger?.closePanel();
this.openItemDetail(item);
}
clearSearch(): void {
this.searchText = '';
this.searchSubject.next('');

Loading…
Cancel
Save