How to trigger a change event when selecting the same option in an sp-picker

InDesign
,
1

I’m working with an sp-picker component in an Adobe UXP extension. The sp-picker has a list of options, and when an option is selected, a change event is triggered, which then calls a function.

However, I’ve noticed that if the user selects the same option again, the change event is not triggered. Is there a way to reset the sp-picker so that selecting the same option would trigger the change event again? Alternatively, are there other UI design patterns or solutions that could handle this situation?

Any advice would be greatly appreciated!

This attempt does not work:

document.querySelector("#my_sp_picker").addEventListener("change", sp_picker_function);

function sp_picker_function (event) {
    // Function Code Goes Here

    // Reset sp-picker value (the following code does NOT work)
    document.querySelector("#my_sp_picker").value = "";
}
2

I have nothing to offer as a solution, but yes, I concur that if the picker has items A & B and the user has selected B going to B again doesn’t trigger the event. I saw this last week when I was working on a project.
In my case, I was pleased, because I think it would have triggered it again back in ExtendScript/Script UI.

Are you just wanting a refresh to happen? Where I was working I added a button to refresh.

jsw

3

Hey Jon,

I agree, from a UI standpoint, that if a user selects B and then selects B again, triggering the event could result in unexpected behavior for the user.

In the Spectrum CSS set of Spectrum components, there is one called sp-action-menu, which could be the right UI element for this case. However, it doesn’t appear to be available in the UXP world at the moment.

I was trying to avoid adding a companion button to trigger the event selected in the sp-picker, as it would require an additional interaction from the user. However, it might be the clearer solution for the user in this case. I’m still exploring other options.

Thanks for the reply I appreciate it!

4

I found a solution to reset a sp-picker for a “clear values” button.

function clear_values () {
    // Reset sp-picker value (this works)
    document.querySelector("#my_sp_picker").selectedIndex = -1;
}