[BUG] Panel menuItems.removeAt() doesn't work with submenus

Photoshop
, ,
1

This is an actual blocker with no workaround :disappointed:

Having as simple menu as this:

[
    {id: "menu1", label: "Menu 1"},
    {
        id: "submenu", label: "Submenu",
        submenu: [
            {id: "submenu1",label: "Submenu 1"},
        ],
    },
    {id: "menu2",label: "Menu 2"},
]

After entrypoints.setup() everything works as expected.

Remove submenu. Seems that it works as expected, and item is gone, but actually it doesn’t work and it is still somewhere in the memory.

Trying to create menu with same IDs in the submenu, error is thrown, that item with the same ID already exists.Trying to add back submenu item, there’s an error, that submenu1 already exists. Even though trying to get that item, it returns null. And there’s no way to remove only submenu items specifically

Add these to UXP Dev Tools playground to test:

  • HTML
<!DOCTYPE html>
<html>
  <head><script src="main.js"></script></head>
  <body><sp-body>PANEL</sp-body></body>
</html>
  • JS
const { entrypoints } = require("uxp")

const flyoutMenu = [
    {id: "menu1", label: "Menu 1"},
    {
        id: "submenu", label: "Submenu",
        submenu: [
            {id: "submenu1",label: "Submenu 1"},
        ],
    },
    {id: "menu2",label: "Menu 2"},
]

entrypoints.setup({
    panels: {
        "vanilla": {
            menuItems: flyoutMenu,
            show: () => {},
        }
    }
})

let { menuItems } = entrypoints.getPanel("vanilla")
console.log("INIT", menuItems.size)

menuItems.removeAt(1)
console.log("REMOVE", menuItems.size)

console.log("GET", menuItems.getItem("submenu1"))

menuItems.insertAt(2, flyoutMenu[1])
console.log("INSERT", menuItems.size)
  • Manifest
{
    "id": "com.adobe.example.vanilla-ps-js",
    "name": "Starter Panel",
    "version": "1.0.0",
    "main": "index.html",
    "host": {
        "app": "PS",
        "minVersion": "23.0.0",
        "data": {
            "apiVersion": 2
        }
    },
    "manifestVersion": 5,
    "entrypoints": [
        {
            "type": "command",
            "id": "showAlert",
            "label": "Show alert"
        },
        {
            "type": "panel",
            "id": "vanilla",
            "minimumSize": {"width": 230, "height": 200},
            "maximumSize": {"width": 2000, "height": 2000},
            "preferredDockedSize": {"width": 230, "height": 300},
            "preferredFloatingSize": {"width": 230, "height": 300},
            "icons": [
                { "width": 32, "height": 32, "path": "icons/icon_D.png", "scale": [ 1, 2 ], "theme": [ "dark", "darkest" ], "species": [ "generic" ] },
                { "width": 32, "height": 32, "path": "icons/icon_N.png", "scale": [ 1, 2 ], "theme": [ "lightest", "light" ], "species": [ "generic" ] }
            ],
            "label": {"default": "Starter Panel"}
        }
    ],
    "icons": [
        {
            "width": 23, "height": 23, "path": "icons/dark.png", "scale": [ 1, 2 ],
            "theme": [ "darkest", "dark", "medium" ]
        }, {
            "width": 23, "height": 23, "path": "icons/light.png", "scale": [ 1, 2 ],
            "theme": [ "lightest", "light" ]
        }
    ]
}