[SOLVED] Onsen UI Tabbar tab cannot be checked by button when previously clicked

Onsen UI Tabbar tab cannot be checked by button when previously clicked

I am developing an Electron app mostly with plain JavaScript and HTML. The app has a top navbar, where all pages (tabs) of the app are stored (kinda like your web browser, but the tabs are fixed and the navbar is stretched on 100% width).

At the footer there are two buttons which give you the next tab on the left/right if available (Prev and Next buttons). You can also click right on the tab itself to get the same result, so you can use one of these two options.

Problem occurs when I click on (for example) the tab2 (I am on tab2 page), then I click on the Next button (tab3 page), then the Prev button to get back, tab2 page loads as it should, but tab3 label appears to be still checked (even in the HTML source it is not, the tab2 is checked).
In a nutshell every tab I've previously clicked on cannot be checked in the HTML. Attribute 'checked' (used by the Next/Prev buttons) works unless the tabs are being clicked on, like there is some attribute that overlays that. In HTML source nothing is happening in those elements when I click on them, no change at all is visible in Chrome debugger.

I just need to be able to check these tabs through JavaScript in the same manner as if was clicking on them directly.

Here are the tabs in HTML and my function for the Next and Prev buttons:

function next_tab() {
  const labels = document.getElementsByClassName('tabbar__item tabbar--top-border__item')
  const current_tab = document.getElementById('main-iframe').src.replace(/^.*[\\\/]/, '')
  let i
  for (i = 0; i < labels.length; i++) {
    if (labels[i].id == current_tab) {
      let next_tab = labels[i + 1]
      if (next_tab) {
        check_new_tab(next_tab, labels[i])
        return next_tab.id
      } else {
        return null
      }
    }
  }
}
function prev_tab() {
  const labels = document.getElementsByClassName('tabbar__item tabbar--top-border__item')
  const current_tab = document.getElementById('main-iframe').src.replace(/^.*[\\\/]/, '')
  let i
  for (i = labels.length - 1; i >= 0; i--) {
    if (labels[i].id == current_tab) {
      let prev_tab = labels[i - 1]
      if (prev_tab) {
        check_new_tab(prev_tab, labels[i])
        return prev_tab.id
      } else {
        return null
      }
    }
  }
}
/**makes the newly selected tab clicked (when it's been switched on to through next/previous buttons)*/
function check_new_tab(new_tab, old_tab) {
  old_tab.children[0].removeAttribute('checked')
  new_tab.children[0].setAttribute('checked', 'checked')
}

<div id="header" class="tabbar tabbar--top tabbar--top-border">

  <label class="tabbar__item tabbar--top-border__item" id='01.html'
    onclick="window.preload.send('switch-tabs-req', '01.html')">
    <input type="radio" name="top-tabbar-b" style="height: 125%;" checked="checked">
    <button class="tabbar__button tabbar--top-border__button">
      Cloud selection
    </button>
  </label>

  <label class="tabbar__item tabbar--top-border__item" id="02.html"
    onclick="window.preload.send('switch-tabs-req', '02.html')">
    <input type="radio" name="top-tabbar-b" style="height: 125%;">
    <button class="tabbar__button tabbar--top-border__button">
      Retailer data volumes
    </button>
  </label>

  <label class="tabbar__item tabbar--top-border__item" id="03.html"
    onclick="window.preload.send('switch-tabs-req', '03.html')">
    <input type="radio" name="top-tabbar-b" style="height: 125%;">
    <button class="tabbar__button tabbar--top-border__button">
      Database size
    </button>
  </label>

</div>

Is there some hidden attribute or setting that I cannot find? Can I override it somehow, so it is utilized in the next_tab/prev_tab functions?

Thank you for help.

Solution

Well I figured it out. Basically the function check_new_tab() should be like this:

function check_new_tab(new_tab) {
  new_tab.click()
}