Smartselect item-after label does not update when the inner select change via react setState

If i bind the value property of the select element to the react’s state then smartselect does not set the current value when state change.
The select works correctly, if i try to open it will show the correct option element selected
but instead the label with the class .item-after onto the listItem is stuck to the initial value.
How can i bind the smartselect to the state too?
Or, can i hide that label and add a custom element to the same place?

<ListItem title="Seleziona un evento" link="#" 
smartSelect smartSelectParams={{ openIn: 'popup', searchbar: true, 
searchbarPlaceholder: 'Cerca per nome',
virtualList: false, closeOnSelect: true
}} >
<Icon slot="media" f7="gear"/>
<select name="event" onChange={doSelezionaEvento}
value={state.eventoSelezionatoId || ''}
>
<option value="">Nessuno</option>
{state.elencoEventi.map(evento =>(
<option key={evento.id} value={evento.id}>{evento.title}</option>)
)}
</select>
</ListItem>

EDIT: sorry posted in the wrong category :frowning:

1 Like

@nolimits4web Hi can, you kindly see this? thanks.

Have the same issue. with vue. When state changes programmatically, the item after is not updating.
Here is the code:

UPDATE: found a solution using a watcher. I have this in a custom component that wraps the f7-list-item smartselect.

  watch: {
value(newValue, oldValue) {
  //Run only on nextTick because sometimes concurrent value changes, should wait for them to finish
  this.$nextTick(function () {
    //watch changes in the state and run smatSelect setValue functions to update item-after label.
    if (this.multiple && newValue.length != oldValue.length) {
      this.$el.children[0].f7SmartSelect.setValue(newValue);
    } else if (!this.multiple && newValue != oldValue) {
      this.$el.children[0].f7SmartSelect.setValue(newValue);
    }
  });
},

},