How to dynamically update disabled state in custom menu items after mergeMenu?

[anniko-dev]

Hi!
I'm building a plugin for custom context menu items, and I ran into an issue.

The getOptions function is supposed to dynamically control the disabled state of each menu item depending on the currently selected unit. However, it seems like mergeMenu is only called once during the initial render, and the menuItemFactory does not update afterwards — so the disabled values remain stale.

Here’s the relevant part of my code:

const unitMenuItems = this._options.tableUnitsList.reduce(
  (acc, unitID) => {
    const operation = generateUnitMenuOperation(unitID, this._options.componentKey);

    acc[operation.id] = {
      menuItemFactory: () => {
        return {
          ...BASE_MENU_ITEM,
          id: operation.id,
          selections: this._settings.getOptions(unitID, this._options.componentKey),
        };
      },
    };

    return acc;
  },
  {} as {
    [key: string]: {
      menuItemFactory: (accessor: IAccessor) => unknown;
    };
  }
);

this._menuManagerService.mergeMenu({
  [ContextMenuPosition.MAIN_AREA]: {
    [ContextMenuGroup.OTHERS]: unitMenuItems,
  },
});

And here’s what getOptions looks like:

public getOptions(unitID: string | number, componentKey: string): IDropDownItem[] {
  if (!this.units[unitID]) return [];

  return this.units[unitID].map((unit) => {
    return {
      label: unit.DisplayName,
      value: unit.InternalName,
      disabled: this.selectedUnit[unit.UnitType].InternalName === unit.InternalName,
      commandId: generateUnitMenuOperationId(unitID, componentKey),
    };
  });
}