How can i add click event to overwrite IonTabButton changeTab()

I want like to open a picker when tab 2 is selected but seems like IonTabButton onClick will trigger changeTab(). Is there any way to overwrite this?

<template>
  <ion-page>
    <ion-tabs>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="tab1" href="/tabs/tab1">
          <ion-icon :icon="triangle" />
          <ion-label>Tab 1</ion-label>
        </ion-tab-button>
          
        <ion-tab-button @click="openPicker">
          <ion-icon :icon="ellipse" />
          <ion-label>Tab 2</ion-label>
        </ion-tab-button>
        
        <ion-tab-button tab="tab3" href="/tabs/tab3">
          <ion-icon :icon="square" />
          <ion-label>Tab 3</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>

<script>
import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage } from '@ionic/vue';
import { ellipse, square, triangle } from 'ionicons/icons';

export default {
  name: 'Tabs',
  components: { IonLabel, IonTabs, IonTabBar, IonTabButton, IonIcon, IonPage },
  setup() {
    return {
      ellipse, 
      square, 
      triangle,
    }
  },
  methods: {
    async openPicker() {
      const options = {
        buttons: [
          {
            text: "Cancel",
            role: 'cancel'
          },
          {
            text:'Confirm',
            handler:(selected) => {
              console.log(selected);
            }
          }
        ],
        columns:[{
          name:'animal',
          options:[
              { text: 'Dog', value: 'd'},
              { text: 'Cat', value: 'c'},
              { text: 'Mice', value: 'm'}
           ]
         }]
      };

      const picker = await this.$ionic.pickerController.create(options);
      picker.present();
    }
  }
}
</script>

Screen Shot 2021-02-26 at 5.01.23 pm

1 Like

use @ionTabsWillChange - see example in documentation here - ion-tabs - Ionic Documentation

I’m trying to add a custom click handler that will open up a picker when Tab 2 is being clicked. I have successfully opened the picker when tab 2 is being clicked but only when i set href for tab 2 ion-tab-button to a certain value or empty string. But this will result in two new issues.

If I set href to an empty string, when tab 3 or tab 4 being selected, it will show that tab 2 is being selected although the page is of tab 3 or tab 4.

Screen Shot 2021-03-02 at 12.01.00 pm

If I set href to a route that is not declared in router/index.js, it will show warning error in the console [Vue Router warn]: No match found for location with path “/tabs/create”

Is there any way to solve this issue for tab 2 ion-tab-button href properties ?

try this… add href="#" on the ion-tab-button since the changeTab method is looking for a path.
This is the code of the changeTab that throws an error when no path from href or tab is provided
const [pathname] = path.split('?');

To fix the issue. Try this code below.

 <ion-tab-button @click="openPicker" href="#">
      <ion-icon :icon="ellipse" />
     <ion-label>Tab 2</ion-label>
 </ion-tab-button>

Is there a way to do this in React? Thanks