Menu items not updated while sp-picker is closed


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">
    {, customSizeUnitIndex) => (
      <sp-menu-item key={customSizeUnitIndex} selected={customSizeUnitIndex == selectedCustomSizeUnit ? true : null}>

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.

Finally I found a solution, using key attribute

For example, in my case

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

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