Sp-opened for sp-picker


I’m having trouble getting this event to function properly in UXP for SP-Picker. Despite trying various solutions, I haven’t been able to make it work. Any assistance would be greatly appreciated.

sp-opened Event Announces that the overlay has been opened

document.getElementById("rename_colour_picker").addEventListener("sp-opened", async evt => {
    console.log("Picker opened")

I use “click” as the event to listen for for sp-menu which is a child of sp-picker. It catches when I click on one of the menu items. I’ve not tried an EventListener for the sp-picker element.

Well, I need to dynamically update items in the picker every time the user expands the picker. It doesn’t work with a click because it will re-update items inside after the user selects something, essentially nullifying the user’s selection because it’s firing the same click event as when you open it.

I just checked, and it looks like I have an event listener for the sp-picker element (parent of the sp-menu elements) where the (event) is passed to the click function. From the event, the sp-menu element’s “id” is extracted and used. So, even if sp-menu elements are dynamic, the sp-picker event listener is able adapt.

I use the following code to exit the event if an sp-menu item isn’t the clicked element, which maybe isn’t even possible when listening for an sp-picker event.

let clickedElement = event.target;
if (clickedElement.tagName !== "SP-MENU-ITEM") {return;};

Once you have event.target, you should be able to handle whatever the sp-menu item is supposed to do.