Tabbar checkbox label issue #2604
Description
Environment
[Core]
onsenui latest
[Platform]
Desktop - Ubuntu 64-bit
[Browser]
Desktop - Firefox 64.0 on Ubuntu 64-bit
Encountered problem
I have a page with a tabbar inside a navigator, there are 2 tabs (A, B). On tab B there is a button, when clicking this button a new page is pushed in the navigator which also has a button. Clicking this final button shows the page of tab A, by itself without the tabbar.
Now here's the weird part, tab A has a list of checkboxes encased in labels (so clicking the label will check its box) this works fine when I go to tab A via the tabbar page, but when I open it by clicking the button on the tab B sub-page it doesn't work. I can click the label and the event fires but the checkbox doesn't get checked, I can click the checkbox directly though to check it.
I discovered that if I remove the original tabbar page (index 0) from the page stack then the checkboxes work but I can no longer use the back button on my sub-page so that's no good.
How to reproduce
Click to the second tab, push the button, push the next button, then try to check a box by clicking a label (it won't work).
- HTML
<ons-navigator id="nav">
<ons-page>
<ons-toolbar>
<div class="center"></div>
</ons-toolbar>
<ons-tabbar>
<ons-tab page="page1.html" label="Tab 1" icon="ion-home, material:md-home" badge="7" active>
</ons-tab>
<ons-tab page="page2.html" label="Tab 2" icon="md-settings" active-icon="md-face">
</ons-tab>
</ons-tabbar>
</ons-page>
</ons-navigator>
<template id="page1.html">
<ons-page id="page1">
<p>This is the first page.</p>
<ons-list>
<ons-list-item tappable>
<label class="left">
<ons-checkbox input-id="check-1"></ons-checkbox>
</label>
<label for="check-1" class="center">
Apple
</label>
</ons-list-item>
<ons-list-item tappable>
<label class="left">
<ons-checkbox input-id="check-2"></ons-checkbox>
</label>
<label for="check-2" class="center">
Banana
</label>
</ons-list-item>
</ons-list>
</ons-page>
</template>
<template id="page2.html">
<ons-page id="page2">
<p>This is the second page.</p>
<ons-button id="push-button" onclick="nav.pushPage('page3.html');">Push Me</ons-button>
</ons-page>
</template>
<template id="page3.html">
<ons-page id="page3">
<p>This is the third page.</p>
<ons-button id="push-button" onclick="nav.pushPage('page1.html');">Push Me Too</ons-button>
</ons-page>
</template>- JS
document.addEventListener('init', function(event) {
var nav = document.getElementById('nav');
});