janosh / svelte-multiselect

Keyboard-friendly, accessible and highly customizable multi-select component
https://multiselect.janosh.dev
MIT License
279 stars 34 forks source link

<MultiSelect> was created with unknown prop itemsSelected #85

Closed swizzley closed 2 years ago

swizzley commented 2 years ago
<script>
  const items = [`Svelte`, `React`, `Vue`, `Angular`, `Vanilla`]
  let itemsSelected = ['Svelte']
</script>

<MultiSelect
  bind:itemsSelected
  options={items}
  selected={['Svelte']}
/>

Console warning probably a sub-issue causing and breaking the entire component when Selected is a var

TypeError: Cannot read properties of undefined (reading 'map')
    at $$self.$$.update (MultiSelect.svelte? [sm]:59:30)
    at update (index.mjs:1089:12)
    at flush (index.mjs:1060:13)
    at init (index.mjs:1908:9)
    at new App (App.svelte:71:57)
    at createComponent (svelte-hooks.js:206:20)
    at targetCmp.$replace (svelte-hooks.js:269:15)
    at refreshComponent (proxy.js:171:15)
    at ProxyAdapterDom.rerender (proxy-adapter-dom.js:77:5)
    at proxy.js:408:9

Above error is present when selected is replaced with variable of same value, new to svelte please forgive my ignorance

<MultiSelect
  bind:itemsSelected
  options={items}
  selected={itemsSelected}
/>
janosh commented 2 years ago

Hi @swizzley. In Svelte you can only bind to props that components expose. bind:itemsSelected assumes MultiSelect has an internal variable called itemsSelected which it does not.

I assume this does what you want?

<script>
  const items = [`Svelte`, `React`, `Vue`, `Angular`, `Vanilla`]
  let selected = [`Svelte`]
</script>

<MultiSelect
    options={items}
    bind:selected
/>
janosh commented 2 years ago

Closing this as resolved. Ping back if issues remain.