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

Ionic Framework ionic-v3
#1

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.

image

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?

#2

I have tried to do this with the help of @dbnr on slack but it didn’t work.
Using event.preventDefault(); to stop the click on ion-checkbox

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

....

 goToItem1Modal(event) {
         event.preventDefault();
        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();
    }

Edit:
image

This is what I have when inspecting ion-checkbox with chrome. It has a button class inside it. What would be the right way to deactivate this?