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

I have the following component modal:

@Component({
  selector: 'app-custom-table-model',
  templateUrl: './custom-table-model.page.html',
  styleUrls: ['./custom-table-model.page.scss'],
})
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);

  constructor(
    private modalController: ModalController,
  ) {
  }

  ngOnInit() {
  }

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

}

and the following HTML:

<ion-header translucent>
  <ion-toolbar>
    <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-buttons>
  </ion-toolbar>
</ion-header>

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

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 = modelData.data;
      }
    });

    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:

{"1":"a","2":"c","3":"d","4":"s","5":"f"
...."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