Navigation Issue in Teams Tab Extension on Mobile Devices

[Selvi-Parasakthi-K]

Steps to reproduce

I am facing an issue with navigation in my Microsoft Teams tab extension. The navigation works perfectly on desktop but fails on mobile devices. Here are the details:

I have implemented a function to navigate between tabs using the pages.currentApp.navigateTo method. This works flawlessly on the desktop client, but on mobile devices, it throws an error with errorCode: 100. Additionally, the isSupported method returns false on mobile, indicating that the navigation method is not supported.

import * as microsoftTeams from "@microsoft/teams-js";
import { pages } from "@microsoft/teams-js";

let app = microsoftTeams.app;

export const navigateBetweenTabs =
  (pageId: string) => (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    e.preventDefault();
    app
      .initialize()
      .then(app.getContext)
      .then((context: any) => {
        if (pages.currentApp.isSupported()) {
          pages.currentApp.navigateTo({
            pageId: pageId,
          });
        } else {
          pages.currentApp.navigateToDefaultPage();
        }
      });
  };

Steps to Reproduce:
1. Implement the provided code snippet in a Microsoft Teams tab extension.
2. Test the navigation on the desktop client to confirm it works.
3. Test the navigation on a mobile device it's not working (Android or iOS).
4. Observe the error with errorCode: 100 and the isSupported method returning false.

Expected behavior

The navigation should work seamlessly on both desktop and mobile clients, allowing users to navigate between tabs without encountering errors.

Actual behavior

The navigation works perfectly on the desktop client but fails on mobile devices. When attempting to navigate on mobile, it throws an error with errorCode: 100, and the isSupported method returns false.

Error details

I noticed a similar navigation behavior in the Microsoft Teams Developer Portal. The portal has three tabs: Home, Apps, and Tools. When I click on “Tools” from within the “Apps” tab using the hamburger menu, the Tools page loads within the Apps tab instead of navigating properly to the Tools tab. I will attach a video for reference.

To temporarily handle this issue, I used href to avoid errors, but this is not a proper solution. I need a robust solution that ensures proper navigation within the Teams app on mobile devices.

Kindly note that for my app, everything works well on desktop. The issue is specific to mobile devices where navigation between buttons is not working.

Could anyone provide guidance on how to properly implement navigation within a Teams tab extension that works seamlessly on both desktop and mobile clients? Any insights or alternative solutions would be greatly appreciated.

Teams-Tab-Developer-Portal.mp4

[Nivedipa-MSFT]

@Selvi-Parasakthi-K - Thank you for your inquiry about your Teams app development issue!
Error code 100 means that the currentApp.navigateTo function is not currently supported on the mobile platform you're trying to call it on. In this case, you should be able to call pages.navigateToApp instead, you will just need to pass it some different parameters (including your own appid).

Please let us know if you have any further query here.

[Selvi-Parasakthi-K]

@Nivedipa-MSFT - Thank you for your suggestion to use pages.navigateToApp. I tried implementing it, but it opens a new window, which exits from the current page. This is not the desired behavior, as I need the navigation to stay within the Teams app.

Here is the code I used:

import * as microsoftTeams from "@microsoft/teams-js";
import { pages } from "@microsoft/teams-js";

let app = microsoftTeams.app;

export const navigateBetweenTabs = (pageId: string, appId: string) => (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
  e.preventDefault();
  app.initialize()
    .then(() => app.getContext())
    .then((context) => {
      pages.navigateToApp({
        appId: appId,
        pageId: pageId
      });
    })
    .catch((error) => {
      console.error("Initialization or context retrieval failed:", error);
    });
};

[Nivedipa-MSFT]

@Selvi-Parasakthi-K - Apologies for the delay. We are checking this internally, we will update you soon.

[Selvi-Parasakthi-K]

@Nivedipa-MSFT - It has been nearly five days, and I have yet to receive a response from your side. Has the issue been fixed? If so, could you please provide the solution?

[Nivedipa-MSFT]

@Selvi-Parasakthi-K - Thank you for your inquiry regarding the status of the issue.

We understand your concern. We are actively checking with the engineering team for any updates on the issue. While there are no new updates at this time, we will inform you as soon as we have more information.

We appreciate your patience and understanding in the meantime. Thank you for bringing this to our attention.