Smartselect svelte instance

Questions
1

I have created a Smartselect with this code

<ListItem title="visibility" smartSelect>
   <select name="visibility" value="0">
      <option value="0">Private</option>
      <option value="2">Public</option>
   </select>
</ListItem>

How can I access to Smart Select Instance??
If I use

<ListItem title="visibility" smartSelect bind:this={someVar}>

someVar does not have f7SmartSelect property mentioned in the documentation.

2

It is not possible currently and there is error in docs, will fix both with next update

3

Hi @nolimits4web. Loving Framework7, you guys have done a ton of work, and the docs, generally, are great. Just wondering, I can’t get SmartSelect to bind to a prop onMount… is the bug you point out here still outstanding? Or maybe I’m doing something wrong? Here’s a snippet from the parent component to the child.

parent.svelte

    <!-- value of project.pubType is 2 -->
    {project.pubType}
    <PubTypePicker bind:selected={project.pubType} /> <!-- however, what is displayed is the first item in the array

pubTypePicker.svelte

<script>
  export let selected;

  import pubTypes from "../data/types.json";
  import { onMount } from "svelte";
  import { ListItem } from "framework7-svelte";

//...

  onMount(() => {
    console.log(selected); // always evaluates to "0" onMount. If however from parent.svelte I click the SmartSelect, in the modal that pops up the correct value is displayed (unlike in parent)... Only if I click a different <option> and then click Close does the value displayed in parent.svelte change to be correct.
  });

</script>

<ListItem
  title="Publication type"
  smartSelect
  smartSelectParams={{ openIn: 'popup', searchbar: true, searchbarPlaceholder: 'Search', closeOnSelect: true, swipeToClose: true }}>
  <select name="pubType" bind:value={selected}>
    <optgroup label="Please select">
      {#each pubTypes as pubType, index}
        <option value={pubType.id}>{pubType.publicationType}</option>
      {/each}
    </optgroup>
  </select>
</ListItem>

Спасибо за помощь! (Я канадец, но 20 лет назад работал воспитателем детского сада в Москве.)

4

Hmm, try also setting selected prop on option:

<option value={pubType.id} selected={selected === pubType.id}>{pubType.publicationType}</option>