Ionic 6 select used within a model component closes the modal on option select? - Angular

I have the following component modal:

  selector: 'app-custom-table-model',
  templateUrl: './',
  styleUrls: ['./'],
export class CustomTableModelPage implements OnInit {

  @Input() userCustomTable: object;
  public customTableOptionsArray = [
    {"value": "", "title": "Empty"},
    {"value": "a", "title": "A"},
    {"value": "b", "title": "B"},
    {"value": "c", "title": "C"},
    {"value": "d", "title": "D"},
    {"value": "e", "title": "E"},
    {"value": "f", "title": "F"},
    {"value": "g", "title": "G"},
    {"value": "h", "title": "H"},
    {"value": "i", "title": "I"},
    {"value": "j", "title": "J"},
    {"value": "k", "title": "K"},
    {"value": "l", "title": "L"},
    {"value": "m", "title": "M"},
    {"value": "n", "title": "N"},


  // 30 Col in the table ex the fixed date col
  public numbersArray = Array.from(Array(29), (_, x) => x);

    private modalController: ModalController,
  ) {

  ngOnInit() {

  async closeModel() {
    await this.modalController.dismiss(JSON.stringify(this.userCustomTable));


and the following HTML:

<ion-header translucent>
    <ion-title class="white-text" style="color: white">Custom Table Layout</ion-title>
    <ion-buttons style="color: white" slot="end">
      <ion-button style="color: white" (click)="closeModel()">Ok</ion-button>

  <ion-list style="padding-top: 0; padding-bottom: 0">
      <ion-label position="stacked">Col 1: Date - Fixed</ion-label>
    <ion-item *ngFor="let colNumber of numbersArray">
      <ion-label position="stacked">Col {{colNumber + 2}}:</ion-label>
      <ion-select [(ngModel)]="userCustomTable[colNumber + 1]">
          *ngFor="let customOption of customTableOptionsArray"

How the modal is called from page.ts:

  async openCustomTableModel() {
    const modal = await this.modalController.create({
      component: CustomTableModelPage,
      componentProps: {
        userCustomTable: JSON.parse(this.item.customTableStructure)

    modal.onDidDismiss().then((modelData) => {
      if (modelData !== null) {
        this.item.customTableStructure =;

    return await modal.present();

The problem I am having is when I try to select another option in the select it just closes the entire model. Then when I try to reopen the modal I get the following error:

Line 2288 - Msg: ERROR Error: Uncaught (in promise): SyntaxError: Unexpected token u in JSON at position 0 SyntaxError: Unexpected token u in JSON at position 0

Wondering what could be the issue/ fix

example of userCustomTable object:

...."30": ""

This bug was added in 6.1.0 and fixed in 6.1.1. Try updating to latest version: 6.1.2

1 Like