ng-multiselect-dropdown
ng-multiselect-dropdown copied to clipboard
On tab focus enter not opening multiselect dropdown
Angular version:14.1
ng-multiselect-dropdown version:1.0.0-beta.19
Description of issue: on pressing enter not opening the ng-multiselect-dropdown
Steps to reproduce:
Expected result:on pressing enter should open the dropdown
Actual result: on pressing enter not opening the ng-multiselect-dropdown
Demo: https://stackblitz.com/edit/ng-multiselect-dropdown?file=src%2Fapp%2Fapp.component.ts
Any relevant code:
<form [formGroup]="myForm">
<ng-multiselect-dropdown
name="city"
[placeholder]="'Select City'"
[data]="cities"
formControlName="city"
[disabled]="disabled"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)">
</ng-multiselect-dropdown>
</form>
ts.
import { FormBuilder, FormGroup } from '@angular/forms';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'multiple-demo',
templateUrl: './multiple-demo.html'
})
export class MultipleDemoComponent implements OnInit {
myForm:FormGroup;
disabled = false;
ShowFilter = false;
limitSelection = false;
cities: Array = [];
selectedItems: Array = [];
dropdownSettings: any = {};
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.cities = [
{ item_id: 1, item_text: 'New Delhi' },
{ item_id: 2, item_text: 'Mumbai' },
{ item_id: 3, item_text: 'Bangalore' },
{ item_id: 4, item_text: 'Pune' },
{ item_id: 5, item_text: 'Chennai' },
{ item_id: 6, item_text: 'Navsari' }
];
this.selectedItems = [{ item_id: 4, item_text: 'Pune' }, { item_id: 6, item_text: 'Navsari' }];
this.dropdownSettings = {
singleSelection: false,
idField: 'item_id',
textField: 'item_text',
selectAllText: 'Select All',
unSelectAllText: 'UnSelect All',
itemsShowLimit: 3,
allowSearchFilter: this.ShowFilter
};
this.myForm = this.fb.group({
city: [this.selectedItems]
});
}
onItemSelect(item: any) {
console.log('onItemSelect', item);
}
onSelectAll(items: any) {
console.log('onSelectAll', items);
}
toogleShowFilter() {
this.ShowFilter = !this.ShowFilter;
this.dropdownSettings = Object.assign({}, this.dropdownSettings, { allowSearchFilter: this.ShowFilter });
}
handleLimitSelection() {
if (this.limitSelection) {
this.dropdownSettings = Object.assign({}, this.dropdownSettings, { limitSelection: 2 });
} else {
this.dropdownSettings = Object.assign({}, this.dropdownSettings, { limitSelection: null });
}
}
}