thomas-lowry / figma-plugin-ds-svelte

Figma Plugin DS components made with Svelte
MIT License
180 stars 26 forks source link

Creating a SelectMenu with no initial items prevents dynamic updates. #4

Closed jckw closed 3 years ago

jckw commented 4 years ago

I've been using the figsvelte starter and have been trying to update the options in the SelectMenu dynamically.

i.e., on load, I send a message to the UI which is received via:

let menuItems = [];

// the standard starter code

window.onmessage = async event => {
  const msg = event.data.pluginMessage;
  if (msg.type === "update-menu-items") {
    menuItems = msg.menuItems // or whatever you like as an array of menu item objects
  }
}

The message is sent and received properly, however, because I removed the initial menuItems, the component render with "There are no items to select."

Replacing the initialisation of menuItems with:

let menuItems = [
  { value: "i-will-be-deleted", label: "Dummy item", group: null, selected: false }
]

// rest as above!

Then the update works perfectly and the dummy item is replaced with the actual data, so it looks like initialising a MenuItem with no items disables updates which was unexpected.

Pretty sure this is a bug, unless there's a different way to update array menus with dynamic data!

jckw commented 4 years ago

With very little knowledge about Svelte or this library, I would guess that it's because the placeholder is set (and the input is marked as disabled) on the first render but not in the function called onMount here:

https://github.com/thomas-lowry/figma-plugin-ds-svelte/blob/ba1e6c14ac205fa988e3cc444980bca9c223908b/src/components/SelectMenu/index.svelte#L27-L49

thomas-lowry commented 3 years ago

Hi @jckw ! I have this solved in the latest release. Thank you so much for flagging!