Button with ion-checkbox calling a Modal - working in FF but not in Chrome and Device

@DeeM52 wrote:

I want to have a list of items with a checkbox on the right. When I click on the item, it opens a modal where I can fill in the details. When details are filled, checkbox is checked.

The problem is that on device and chrome, a click activates/deactivates the checkbox and the modal is never opened. On firefox, Everything is working fine.

This is my code in HTML

    <ion-list>

        <button ion-item (click)="goToItem1Modal()">
            <ion-label>Add Item 1 details</ion-label>
            <ion-checkbox item-right checked={{isValidCheckbox.item1}}></ion-checkbox>
        </button>

        <button ion-item (click)="goToItem2Modal()">
            <ion-label>Add Item 2 details</ion-label>
            <ion-checkbox item-right checked={{isValidCheckbox.item2}}></ion-checkbox>
        </button>

        <button ion-item (click)="goToItem3Modal()">
            <ion-label>Add Item 3 details</ion-label>
            <ion-checkbox item-right checked={{isValidCheckbox.item3}}></ion-checkbox>
        </button>

    </ion-list>

And this is the code in the TS file

import { Component } from '@angular/core';
import { NavController, AlertController, ModalController } from 'ionic-angular';

import { Item1Modal } from "../item1-modal/item1-modal"
import { Item2Modal } from "../item2-modal/item2-modal"
import { Item3Modal } from "../item3-modal/item3-modal"

@Component({
    templateUrl: 'build/pages/test-2/test-2.html',
})
export class Test2Page {

    item1Details: string = "";
    item2Details: string = "";
    item3Details: string = "";

    isValidCheckbox = {
        item1: true,
        item2: false,
        item3: false
    }

    constructor(
        private navCtrl: NavController,
        private modal: ModalController,
        private alertCtrl: AlertController

    ) { }

    goToItem1Modal() {
        let item1Modal = this.modal.create(Item1Modal, {recDetails: this.item1Details});

        item1Modal.onDidDismiss(data => {
            //Getting back item1Details information from the modal
            console.log(data);
            this.item1Details = data;

            if(data.length > 3) {
                this.isValidCheckbox.item1 = true;
            } else {
                this.isValidCheckbox.item1 = false;
            }
        });

        item1Modal.present();
    }

    goToItem2Modal() {
        let item2Modal = this.modal.create(Item2Modal, {recDetails: this.item2Details});

        item2Modal.onDidDismiss(data => {
            console.log(data);
            this.item2Details = data;

            if(data.length > 3) {
                this.isValidCheckbox.item2 = true;
            } else {
                this.isValidCheckbox.item2 = false;
            }
        });

        item2Modal.present();
    }

    goToItem3Modal() {
        let item3Modal = this.modal.create(Item3Modal, {recDetails: this.item3Details});

        item3Modal.onDidDismiss(data => {
            console.log(data);
            this.item3Details = data;

            if(data.length > 3) {
                this.isValidCheckbox.item3 = true;
            } else {
                this.isValidCheckbox.item3 = false;
            }
        });

        item3Modal.present();
    }

}

I think the click is absorbed by the ion-checkbox and so the modal is never opened. Anyone has any idea on how to solve this?

Posts: 2

Participants: 1

Read full topic