Search not working in Angular 10

[jpr303]

There is a problem with searching in Angular 10. The search results seem to be "delayed" by one interaction.

In the screenshot below, I typed in the letter 'c' in the search - I would expect two results: France and Canada. When I click my mouse either outside of the browser or right next to the letter 'c' in the search box it then displays correctly:

In Angular 8 I did not have to have a second interaction in order to see the search results.

Any help would be appreciated

Versions: Angular 10.1.6 Angular2-multiselect-dropdown 4.6.5

[4ds23d]

The same behavior in my project!

[kamssiopeia]

Hey guys, you can try my fix using my fork

[jpr303]

This remains broken in the recently released 4.6.6 version as well.

[eszione]

A workaround: you can add a keydown host listener and do a setTimeout(()=>{}) to force the angular digest cycle to trigger.

[jpr303]

Thank you @eszione !

I went ahead and created a simple directive to wrap this code in so that it will be easy to take out later when the problem is officially fixed and to focus the keydown listener on only the multiselect component itself.

app-multiselect-search-fix.directive.ts

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[fixSearchBug]'
})
export class MultiselectSearchFixDirective {
  // trigger an additional change detection cycle
  @HostListener('keydown') onKeydownHandler() {
    setTimeout(()=>{});
  }
}

app.module.ts

...
import { MultiselectSearchFixDirective } from './app-multiselect-search-fix.directive';

@NgModule({
  declarations: [
    AppComponent,
    MultiselectSearchFixDirective
  ],
  ...
})
export class AppModule { }

app-component.html

<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings"
    (onSelect)="onItemSelect($event)" (onDeSelect)="onItemDeSelect($event)"
    (onSelectAll)="onSelectAll($event)" (onDeSelectAll)="onDeSelectAll($event)"
    fixSearchBug></angular2-multiselect>