-
Notifications
You must be signed in to change notification settings - Fork 13.4k
Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
v8.x
Current Behavior
I'm using <IonTabs> in basic mode (i.e. without a router).
I wanted to switch tabs programmatically, using the IonTabsContext, like this
function TabSwitcher() {
const tabContext = useContext(IonTabsContext);
const switchToTab = (tab: string) => {
tabContext.selectTab(tab); // Programmatically switch to the specified tab
};
return (
<div>
<button onClick={() => switchToTab('radio')}>
Go to Radio tab
</button>
</div>
);
}
Then I used this component in one tab, wanting it to switch to another tab:
<IonTabs>
<IonTab tab="home">
<div>
<IonContent>
<div>
Home content
<TabSwitcher />
</div>
</IonContent>
</div>
</IonTab>
But when I click the button to switch tabs, nothing happens.
When I debugged the code, the context is there, it has the correct structure, the function selectTab(tab) exists, it just doesn't change the tab,
Expected Behavior
Calling tabContext.selectTab(tab) should change the active tab to the tab Radio.
Steps to Reproduce
- Go to https://ionicframework.com/docs/api/tabs#basic-usage and fork the example code.
- Create the TabSwitcher component and add it to the first tab.
- Observe that clicking the TabSwitcher button doesn't switch tabs to the second tab.
Code Reproduction URL
https://stackblitz.com/~/github.com/jansoltis/ionic-tabs-switch-issue?file=src/main.tsx
Ionic Info
Ionic:
Ionic CLI : 7.2.0 (C:\Users\admin\AppData\Roaming\nvm\v20.11.1\node_modules@ionic\cli)
Ionic Framework : @ionic/react 8.4.0
Capacitor:
Capacitor CLI : 6.1.2
@capacitor/android : 6.1.2
@capacitor/core : 6.1.2
@capacitor/ios : 6.1.2
Utility:
cordova-res : 0.15.4
native-run : 2.0.1
System:
NodeJS : v20.11.1 (C:\Program Files\nodejs\node.exe)
npm : 10.2.4
OS : Windows 10
Additional Information
No response