Unable to programmatically change placeholder name for sp-picker in the UI (possible bug)

Photoshop
1

I want to programmatically change the placeholder name in the following code:

<sp-picker size="s" id="myPicker" placeholder="Choose item...." style="width: 144px;">
      <sp-menu id="menuACTIONPICKER" slot="options">
      </sp-menu>
</sp-picker>

I’ve tried:

document.getElementById("myPicker").placeholder = "Choose Photoshop Action...";

and

document.getElementById("myPicker").setAttribute("placeholder", "Choose Photoshop Action...");

and neither makes the corresponding change in the plugin’s UI.

However, if I log the value of the placeholder after either of these programmatic changes, it’s correct:

console.log(document.getElementById("myPicker").placeholder); //"Choose Photoshop Action...";

So, it appears that the placeholder is changed in Photoshop, but it’s not reflected in the UI.

I have successfully changed the placeholder of sp-textfield elements. Right now it’s just the sp-picker elements that I can’t change.

Any ideas?

2

@AnthonyK Hi – this is because we don’t have a placeholder attribute for sp-picker. Can you try label instead?

3

Hmm, sp-dropdown has a “placeholder” attribute (but that’s going to be deprecated) so I assumed sp-picker would have the “placeholder” attribute also, and, in fact, the “placeholder” attribute does work in the HTML for vanilla JavaScript plugins for the sp-picker elment. The placeholder value is properly displayed on the plugin to let the user know what to do with the picker menu. It’s just programmatically changing it where the failure occurs.

I tried replacing “placeholder” with “label” in the he following HTML. But it fails to even show the “label” value “Choose item…” in the picker menu window before the user selects an item from the picker:

<sp-picker size="s" id="myPicker" label="Choose item...." style="width: 144px;">
      <sp-menu id="menuACTIONPICKER" slot="options">
      </sp-menu>
</sp-picker>

I copied in the code from this page below, and it doesn’t display the label value “Selection type” in the picker menu either.

        <sp-picker id="picker-m" size="m" label="Selection type">
            <sp-menu-item>Deselect</sp-menu-item>
            <sp-menu-item>Select inverse</sp-menu-item>
            <sp-menu-item>Feather...</sp-menu-item>
            <sp-menu-item>Select and mask...</sp-menu-item>
            <sp-menu-divider></sp-menu-divider>
            <sp-menu-item>Save selection</sp-menu-item>
            <sp-menu-item disabled>Make work path</sp-menu-item>
        </sp-picker>

So, to some degree, it seems the label attribute works less well than the placeholder attribute. At least the placeholder attribute shows the initial HTML value.

Still seems like there’s a bug here, but maybe I’m doing something wrong.

4

It sounds like this may be a bug. Our team is going to take a look at this – thanks for sharing the details!

5

sp-picker officially is not even supported on Ps UXP - only sp-dropdown

I actually use picker like this and do have a placeholder in my plugin, but never tried to change it with JS. I use React, so it does all the magic in changing stuff depending on a state

6

FYI Adobe employees: This is being tracked in UXP-20473.

7

FYI, this is marked as “fixed” in UXP 7. It’s expected to be out in early 2023. I don’t know which version of Photoshop will have UXP 7 yet.

8

@Erin_Finnegan - What’s the fix? Is the label attribute going to work or is the placeholder attribute going to work? Or both, for changing this attribute programmatically with JS?

9

We talked about this one at office hours today :+1:t2:. If you took notes, @AnthonyK, perhaps post them here for others?

10

It sounds like placeholder is going to be the supported attribute starting with UXP 7, if I followed the conversation correctly.