Smartselect max length and virtual list error

Questions
1

Hi,
im using f7-v4.5 with vue.

Im trying to create a smart select with max length = 3 and virtual list.
it works fine until you select 3 items. then if you scroll down, the next items in the VL are enabled. So i added a renderItem fnc;

renderItem (item, index) {
  let disabled = this.ssNames.getValue().length === parseInt(this.ssNames.maxLength)
  item.disabled = disabled
  return `
    <li class="${disabled ? 'disabled' : ''}">
      <label class="item-checkbox item-content">
        <input type="checkbox" name="${item.inputName}" value="${item.value}">
        <i class="icon icon-checkbox"></i>
        <div class="item-inner">
          <div class="item-title">${item.text}</div>
        </div>
      </label>
    </li>
  `
}

but now the problem is, that if i unselect an item the portion of my VL gets enabled, as it should, but if you scroll up or down the next portion is disabled. And now renderItem fnc its not called.

Any advice on how to achieve this?

i made a small fiddle with my code;
jsfiddle

and my ss create full code

this.ssNames = vm.smartSelect.create({
  el: '.test-smart-select',
  openIn: 'popup',
  virtualList: true,
  virtualListHeight: 44,
  renderItem: (item, index) => {
    let disabled = this.ssNames.getValue().length === parseInt(this.ssNames.maxLength)
    item.disabled = disabled
    return `
      <li class="${disabled ? 'disabled' : ''}">
        <label class="item-checkbox item-content">
          <input type="checkbox" name="${item.inputName}" value="${item.value}">
          <i class="icon icon-checkbox"></i>
          <div class="item-inner">
            <div class="item-title">${item.text}</div>
          </div>
        </label>
      </li>
    `	
  }
})
2

Here it is https://jsfiddle.net/6L4yuhnq/

  • clear VL cache on smart select change
  • track also “selected” state in renderItem

I guess i will need to add it to the core

1 Like
3

Awesome thanks! Will test it today.