I have build a method that will insert custom text into an ion-select multi. I use an Alert box to insert the custom test in the select array and input field on dismiss of the alert box. Everything is working except the alert box will open again after the data is inserted into the input field.. how do I insure async inputCustomValuesMulti only runs once.
html
<ion-item class="ion-text-wrap">
<ion-label position="stacked">{{fromItem.Question}}</ion-label>
<ion-select multiple="true" #c (ionChange)="selectChangedMulti(c.value, i)" name="{{fromItem.name}}" [(ngModel)]="fromItem.input">
<ion-select-option *ngFor="let item of importQuestions[i].values" value="{{item.value}}" >{{ item.value }}</ion-select-option>
</ion-select>
</ion-item>
ts
selectChangedMulti(selectedValue: string[], index: string ) {
this.index = index;
if (selectedValue.includes("other")) {
this.inputCustomValuesMulti(selectedValue);
} else {
this.currentValue = selectedValue;
};
};
async inputCustomValuesMulti(selectedValue) {
const inputAlert = await this.alertController.create({
header: 'Enter your custom text:',
inputs: [ { type: 'text', placeholder: 'type in' } ],
buttons: [ { text: 'Cancel' }, { text: 'Ok' } ]
});
await inputAlert.present();
await inputAlert.onDidDismiss().then((data) => {
let customValueName: string = data.data.values[0];
if (customValueName) {
let indexFound = this.importQuestions[this.index].values.findIndex((item: string) => item === customValueName)
if (indexFound === -1) {
this.importQuestions[this.index].values.push({value: customValueName});
let importQuestion = selectedValue;
importQuestion.push(customValueName);
let passData = importQuestion;
let newArray = Array.from(passData);
// inserts new text into input field
this.importQuestions[this.index].input = newArray;
} else {
console.log("else");
};
};
})
};
What I ended up doing was filter out other from the pass Data.
let passData = importQuestion.filter(e => e !== "other");
Now the method no longer sees "other" on ionChange.