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

[ashwin_0502]

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);

});

[Dirk Becker · Accepted solution]

<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.

[Dirk Becker]

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.

[ashwin_0502]

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? 

[ashwin_0502]

Hi Dirk Becker,

Thank you,

Now my promblem is solved 

Thanks,

Ashwin Lohiya