Set Tab Programmatically with no Vanilla Framework

I am working on my first ionic app. I’m just using vanilla Javascript. I am using ion-tabs for the 3 main parts of the app. at one point, my app submits form data. When the form is submitted, the page reloads and upon reload always open the first tab, not the tab they were previously on. I would like to find a way to pass a variable to the tabs to have the right tab open. So far, I can’t seem to find a way to do this.

Any thoughts?

// ugly implmentation - to avoid present method not present
  // selected-tab does not seem to work
  let tries = 0;
  const selectTab = () => {
    const controller = document.querySelector("ion-tabs");
    if (controller.select) {
      controller.select(selected);
    } else if (tries < 300) {
      setTimeout(() => {
        tries++;
        selectTab();
      }, 1);
    }
  };

I must be missing something…that’s not working for me. When I run that code in my console I get “undefined”. Here is my full page…

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
  <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>
  
    <link rel="stylesheet" href="inc/css.css"/>



</head>
 <body>



    
 <ion-app>
  <ion-tabs id='ion-tabs'>

  <ion-tab tab="tab-schedule"> schedule content 
  </ion-tab>

  <ion-tab tab="tab-speaker"> speaker content
  </ion-tab>

  <ion-tab tab="tab-map"> map content
  </ion-tab>

  <ion-tab tab="tab-about"> about content
  </ion-tab>

  <ion-tab-bar slot="bottom" selected-tab="tab-speaker">
    <ion-tab-button tab="tab-schedule">
      <ion-icon name="calendar"></ion-icon>
      <ion-label>Schedule</ion-label>
      <ion-badge>6</ion-badge>
    </ion-tab-button>

    <ion-tab-button tab="tab-speaker">
      <ion-icon name="person-circle"></ion-icon>
      <ion-label>Speakers</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab-map">
      <ion-icon name="map"></ion-icon>
      <ion-label>Map</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab-about">
      <ion-icon name="information-circle"></ion-icon>
      <ion-label>About</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>
	
 </div>
 </ion-app>
  </body>
</html>



<script>

  let tries = 0;
  const selectTab = () => {
    const controller = document.querySelector("ion-tabs");
    if (controller.select) {
      controller.select(selected);
    } else if (tries < 300) {
      setTimeout(() => {
        tries++;
        selectTab();
      }, 1);
    }
  };

</script>

Well, this was an example code to get to the ion-tab controller and invoke its method as per api.

As you can see there is at least one variable not defined in the code (selected) - and your challenge is to give it the proper value. Maybe it is a number, I don’t know by heart - or maybe just the tab-name (e.g. tab-about)