I've been working with an ionic app that utilizes the ionic-selectable plugin, and for the most part, it's been running smoothly. However, I encountered a rare scenario where if a user on a slow device quickly clicks on a selection twice in succession, an error occurs.
Error: Uncaught (in promise): IonicSelectable is disabled or already closed
I suspect this happens because the component IonicSelectableComponent is being called twice. Therefore, I am looking to ensure that the onChange event is triggered only once and cannot be activated again by a rapid subsequent click.
Is there a way to achieve this?
HTML
<form #NameFour="ngForm">
<ion-item>
<ion-label class="ion-text-wrap" position="stacked">{{ 'NEW.countrycode' | translate }} <span style="color:red">*</span></ion-label>
<ionic-selectable
name="countrycode"
*ngIf="loadValue(i,p)"
placeholder="Please select country"
class="form-control"
required
[(ngModel)]="CountryInput"
[items]="countryCodesService.countryCodeArray"
itemValueField="code"
itemTextField="name"
[canSearch]="true"
(onChange)="changeCountryCode($event,i,p)">
<ng-template ionicSelectableItemTemplate let-CountryInput="item">
{{CountryInput.name}} [+{{CountryInput.code}}]
</ng-template>
<ng-template ionicSelectableValueTemplate let-CountryInput="value">
{{CountryInput.name}} [+{{CountryInput.code}}]
</ng-template>
</ionic-selectable>
</ion-item>
</form>
.ts
changeCountryCode(event: { component: IonicSelectableComponent, value: any },i: string |
number, p: string | number){
this.CountryISO = this.CountryInput.acronym;
this.CountryCode = this.CountryInput.code;
}