Is sp-picker now official?

Photoshop UXP Plugin API
1

​ I am now seeing this message in Dev Tool:
“sp-dropdown is deprecated. Please use sp-picker instead.”
However, when I tried to switch out my dropdown to sp-picker, it does not function properly. I also cannot find picker in the UXP docs.
If I keep using sp-dropdown, is my plugin going to stop working sometime soon?

1 Like
2

Actually you can use <sp-picker />, but it’s a mix of both picker and dropdown

I use it like:

<sp-picker label="Label">
    <sp-label slot="label">Label</sp-label>
    <sp-menu slot="options">
        <sp-menu-item value="value1" selected=true>Value 1</sp-menu-item>
        <sp-menu-item value="value2">Value 2</sp-menu-item>
        <sp-menu-item value="value3">Value 3</sp-menu-item>
    </sp-menu>
</sp-picker>
2 Likes
3

Perfect…that works! Thank you!

4

Related with this, I am trying to add sp-menu-item dinamically but then I can’t selected.

With first option, it doesnt work because selected is changed to null automatically and always it selects last index

<sp-menu slot="options">
                {items.map((item, index) => (
                  <sp-menu-item key={index} selected={selectedLanguage(index)}>
                    {item}
                  </sp-menu-item>
                ))}
              </sp-menu>

In second option with “value=‘0’”, it doesn’t work


<sp-menu slot="options" value="0">
                {items.map((item, index) => (
                  <sp-menu-item key={index}>
                    {item}
                  </sp-menu-item>
                ))}
              </sp-menu>

Also I have problems with onChange, because it doesn’t call the funcion

      <sp-dropdown onChange={changeHandler}>
        .....
      </sp-dropdown>

       <sp-picker label="Label" size="s" onChange={changeHandler}>
        .....
      </sp-picker>

Someone knows solutions?

5

Try

selected={selectedLanguage(index) ? true : null}

It can be only one of true or null. It can’t be false.

1 Like
6

YES!! It works, much thanks!

7

Hi! After hours of trial&error, the only solution that works is yours @Karmalakas !!

1 Like
8

Does no onChange work with these components? I try to open a dialog box on photoshop using react, javascript and UXP. I can not get the value of the selected menu item. How can I achieve this? @Karmalakas

const DialogContent = ({dialog}) => {
  return (
    <>
    <sp-picker label="Label">
    <sp-label slot="label">Please select a reason</sp-label>
    <sp-menu slot="options" onChange={handleSelection}>
        <sp-menu-item value="value1" selected={true}>{options.item1}</sp-menu-item>
        <sp-menu-item value="value2">{options.item2}</sp-menu-item>
        <sp-menu-item value="value3">{options.item3}</sp-menu-item>
        <sp-menu-item value="value4">{options.item4}</sp-menu-item>
    </sp-menu>
    </sp-picker>
  
    <sp-footer>
        <sp-button onClick={() => dialog.close()}>Close</sp-button>
    </sp-footer>
    </>  
  );
}
9

You must use some wrapper. I personally use wc-react

10

A post was split to a new topic: Menu items not updated while sp-picker is closed

11

I know that this is very old and solved. I was using the same solution but recently I found out that you can listen to onClick events on individual sp-menu-item elements.