Menu items not updated while sp-picker is closed

Photoshop UXP Plugin API
,
1

Hi!

I have a new problem with sp-picker

With this code, when I change the language (it gets from state thorugh react redux), the selected item doesn’t change the translation. If I open the picker all sp-menu-items are translated (also the selected), but with the picker closed the selected doesn’t change.

const customSizeUnits = [
  { unit: 'in', translation: translations[selectedLanguage].UNITS_INCHES },
  { unit: 'cm', translation: translations[selectedLanguage].UNITS_CENTIMETERS },
  { unit: 'mm', translation: translations[selectedLanguage].UNITS_MILLIMETERS },
  { unit: 'pt', translation: translations[selectedLanguage].UNITS_POINTS }
];

const [selectedCustomSizeUnit, setSelectedCustomSizeUnit] = useState(1);

<sp-picker label="Label" size="s">
  <sp-menu slot="options">
    {customSizeUnits.map((customSizeUnit, customSizeUnitIndex) => (
      <sp-menu-item key={customSizeUnitIndex} selected={customSizeUnitIndex == selectedCustomSizeUnit ? true : null}>
        {customSizeUnit.translation}
      </sp-menu-item>
    ))}
  </sp-menu>
</sp-picker>
2

I’ve experienced this also with the sp-picker placeholder name. If it’s showing (instead of a selected item), it does not update when the panel changes language. The plugin has code the translates button names, list items, etc, but not placeholders. I’m using code like this:

document.getElementById("idOfsp-pickerElement").placeholder = "translation string";

It works sometimes, but not all the time.

3

Finally I found a solution, using key attribute

For example, in my case

<sp-picker label="Label" size="s" key={selectedLanguage}>
   ....
</sp-picker>
1 Like
4

Oh, it probably re-renders whole sp-picker if key changes
You can mark your own answer as a solution by clicking on a checkbox on the bottom right of your post

1 Like