# Menu items not updated while sp-picker is closed

**URL:** <https://forums.creativeclouddeveloper.com/t/menu-items-not-updated-while-sp-picker-is-closed/6315>\
**Category:** UXP Plugin API\
**Tags:** react, uxp\
**Created:** [May 19, 2023, 12:00pm UTC](https://forums.creativeclouddeveloper.com/t/menu-items-not-updated-while-sp-picker-is-closed/6315 "2023-05-19T12:00:24Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![develop13](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@develop13](https://forums.creativeclouddeveloper.com/u/develop13)\
**Post date:** [May 19, 2023, 12:00pm UTC](https://forums.creativeclouddeveloper.com/t/menu-items-not-updated-while-sp-picker-is-closed/6315/1 "2023-05-19T12:00:24Z")

</div>

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.

```auto
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>

```

---

<div class="post-metadata">

**Author:** ![AnthonyK](https://avatars.discourse-cdn.com/v4/letter/a/85f322/32.png) [@AnthonyK](https://forums.creativeclouddeveloper.com/u/AnthonyK)\
**Post date:** [May 20, 2023, 1:28am UTC](https://forums.creativeclouddeveloper.com/t/menu-items-not-updated-while-sp-picker-is-closed/6315/2 "2023-05-20T01:28:41Z")

</div>

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:

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

```

It works sometimes, but not all the time.

---

<div class="post-metadata">

**Author:** ![develop13](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@develop13](https://forums.creativeclouddeveloper.com/u/develop13)\
**Post date:** [May 24, 2023, 11:23am UTC](https://forums.creativeclouddeveloper.com/t/menu-items-not-updated-while-sp-picker-is-closed/6315/3 "2023-05-24T11:23:47Z")

</div>

Finally I found a solution, using key attribute

For example, in my case

```auto
<sp-picker label="Label" size="s" key={selectedLanguage}>
   ....
</sp-picker>

```

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [May 24, 2023, 11:40am UTC](https://forums.creativeclouddeveloper.com/t/menu-items-not-updated-while-sp-picker-is-closed/6315/4 "2023-05-24T11:40:38Z")

</div>

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