We are using the tablist component from @fluentui/react-components version 9.0.1. @fluentui/react-tabster requires tabster@^1.4.2 (package.json); note the caret which permits upgrades to minor versions.

We start seeing the following error after upgrading tabster to 1.5.1.

This error happens when a tab item is clicked. This is due to the useTabster hook in @fluentui calls the getCurrentTabster or createTabster methods.

export const useTabster = (): TabsterTypes.TabsterCore | null => {
  ...
  return getCurrentTabster(defaultView) ?? createTabster(defaultView, tabsterOptions);
};

The getCurrentTabster returns an instance of TabsterCore and the createTabster returns an instance of Tabster. createTabster() method assigning TabsterCore instance to the windows object instead of the Tabster instance. See code below:

/**
 * Creates an instance of Tabster, returns the current window instance if it already exists.
 */

function createTabster(win, props) {
  let tabster = getCurrentTabster(win);

  if (tabster) {
    return tabster.createTabster();
  }

  tabster = new TabsterCore(win, props);
  win.__tabsterInstance = tabster;
  return tabster.createTabster();
}

When the getMover method is trying to access tabster.core, tabster.core is undefined.

Proposal change: assigning Tabster instance to windows and return it.

function createTabster(win, props) {
  ...
  let tabsterCore = new TabsterCore(win, props);
  tabster = tabsterCore.createTabster();
  win.__tabsterInstance = tabster;
  return tabster;
}

Another proposal change in Fluent UI side, change the return in the useTabster hook to call createTabster method only.

export const useTabster = (): TabsterTypes.TabsterCore | null => {
  ...
  return createTabster(defaultView, tabsterOptions);
};