Skip to main content
A
ashwin_0502
Inspiring
July 25, 2025
Answered

sp-picker not working in InDesign drop down selection and event not triggering

  • July 25, 2025
  • 1 reply
  • 542 views

I am working with uxp for adobe InDesign and created a drop-down using <sp-picker> the dropdown is meant to show "Row per page " options. How ever the sp-picker not working  expected 

The drop down appear but selecting an item does not triggering any event 

But nothing happens when I select a different value 

 

<sp-picker id="rowsPerPagePicker" label="Rows per page" placeholder="Select rows">

  <sp-menu-item value="10">10</sp-menu-item>

  <sp-menu-item value="25">25</sp-menu-item>

  <sp-menu-item value="50">50</sp-menu-item>

  1. </sp-picker>

const picker = document.getElementById('rowsPerPagePicker');

 

picker.addEventListener('change', (event) => {

  console.log('Selected value:', event.target.va

lue);

});

Correct answer Dirk Becker

<sp-dropdown> had the menu items wrapped with an extra <sp-menu slot="options">

I left it in place because I had missed that it was not needed.

On the other hand, I'm also missing change events when I populate the picker by JS and then set the value, and/or selectedIndex. The user event works.

Still very work in progress, both my plugin and UXP.

1 reply

D
Dirk BeckerCorrect answer
Legend
July 26, 2025

<sp-dropdown> had the menu items wrapped with an extra <sp-menu slot="options">

I left it in place because I had missed that it was not needed.

On the other hand, I'm also missing change events when I populate the picker by JS and then set the value, and/or selectedIndex. The user event works.

Still very work in progress, both my plugin and UXP.

D
Dirk Becker
Legend
July 26, 2025

Hiding in the docs:

https://opensource.adobe.com/spectrum-web-components/components/picker/changelog/

sp-menu was "deprecated in PickerBase" derived classes, ca. 2021

 

I guess the UXP implementation of sp-picker that I use (as of InDesign 20.4.1)  is older and nobody bothered to update it, while some suggestions were floating around to use swc versions instead of uxp widgets. To me that implied growing code size and dependency handling, so I try to avoid it for now.

 

Btw, there was some comment removed that suggested to take the value from the picker rather from event.target . Might be helpful if you receive an event at all, I work with the selectedIndex.

A
ashwin_0502Author
Inspiring
July 26, 2025

Hello

 

so this code is work InDesign current version react template and uxp current version now

 

const options=[10,20,30]

 

when I use sp-picker then use options sp-menu-item ???

 

<sp-picker id="rowsPerPagePicker" label="Rows per page" placeholder="Select rows">

  <sp-menu-item value="10">10</sp-menu-item>

  <sp-menu-item value="25">25</sp-menu-item>

  <sp-menu-item value="50">50</sp-menu-item>

</sp-picker>

 

 

selectedIndex gives you the index of the currently selected item in the picker.

 

picker.options[selectedIndex].value

lets you directly access the value of the selected item, instead of relying on event.target.

 

// Accessing the picker element by its ID

const spPicker = document.querySelector('#rowsPerPagePicker');

 

//event listener for when the selection changes

spPicker.addEventListener('change', () => {

    const selectedIndex = spPicker.selectedIndex; 

// Getting the index of the selected item

    const selectedValue = spPicker.options[selectedIndex].value;

 // Getting the value of the selected item

    console.log('Selected Value:', selectedValue);

});

 

This code is correct t

o get selected index and value? 

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices