Smartselect svelte instance

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>

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.

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

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.


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


  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.


  title="Publication type"
  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.publicationType}</option>

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

Hmm, try also setting selected prop on option:

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