Is it possible to build hierarchical menus on modal dialogs?

I’d like to build a hierarchical menu (a menu with submenus depending from some items on the outer menu) on a modal dialog.

I can see how to do something similar on flyout contextual menus on the panel, but I can’t see how to do it within an Sp-picker element. They only allow sp-menu-item or horizontal dividers in them (or menu groups, which are not what I want)

I’m using spectrum widgets, not web components.

Is the only way to revert to native html and then tweak css to get the right appearance?

I used popover element to make my own dropdowns with custom content. It can get out of panel and dialog bounds.

Interesting. Do you use the change event on the menu so that it’s collapsed back to a single item when you show the popover? That sounds doable

I don’t remember. And I can’t post a code. But there were few traps. One of them crashed Photoshop. I think I reported it. Another one is you can show only one popover at the time. You also cannot change height after it is shown. And inside popover not some weird bugs can occur e.g. if you nest native spectrum widgets or you do something with events…

Hmmm, you are really making me want to tackle this!

1 Like

FWIW, a couple of observations

As far as I can tell Photoshop doesn’t support classic html popovers (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover). Were you using something else?

When I tried a home brew equivalent for another part of my project I ran into something that you’d mentioned in another thread: the z-index is not honoured. Specifically a small area around any text in a sp-textfield always lies on top of anything else. I haven’t seen any other equivalent issues, but I haven’t dug too hard.

This also applies to the tooltips as demonstrated in the kitchen sink example plugin.

So far I’ve been able to position my pop ups so they don’t get messed up, but the submenus I was considering could not be.

I’m really close to putting those onto my ‘version 2’ list and ignoring them for now.