VUE smartSelect with virtualList and sticky item-dividers

Hello,

I was trying to make a smartSelect render as virtual list because my client list is huge, and used a computed method to organize the names into groups, using the first letter as the index.

Now, I wanted to make this smart select item dividers sticky, so i added a css class for it, but when using the virtual list, this breaks after letter F. Do you know how this can be done? What I’am doing wrong?
I understand this has to do with some “real time” position calculation, but not sure how to solve it. If the index thing (sticky) can be done another way please let me know!

I have this code example here:

If possible you could make item dividers sticky by default? so you would apply the correct offset for sticky which might be zero?

Thanks!

I did it, Solved.

so the hack was to hook into the select open event, then if the virtualList is a smart param then, inject into the virtual list instance available in the smart open even closure, and add the virtual list event that handles the before item append. Then manipulate the elements, in a way that the structure should follow the ul > li design, where the top positions are for the UL, and the li can have the sticky for the list li of the ul.

working example:

your logic/method brakes under theme: 'ios',
and adding searchbar: true makes it worse.

if you really have a large list,
then you better make your own smart-select.

with smart-select+virtual-list your list gets rendered anyway on-mounted
which will result in a very large dom:

<select name="n">
  <optgroup label="i">
    <option value="j"></option>
    <!--  long list in dom  -->
  </optgroup>
</select>

what’s the point?

Yes but despite the optgroup being in the dom, I believe it wont impact performance during the time the smartSelect is opened and scrolled (Because those dom elements are not rendered), and it is where the low performance exists when long list. However I’m aware that when the list is long, the smartSelect takes a while to open, and even close ( after selecting)

About the custom smartSelect, I wanted to do the less I could using the own framework methods.

About the theme, I did not test with IOS because I only use MD.

But I do use searchbar with virtual list and smart select and it works great, are you putting searchbar:true in the smart params and not on the “on” right? As you can see with the link example I provided.

But I will try to fix the css issue.

not just ‘optgroup’, also the ‘option’

every single dom-node gets parsed,style,reflow,painting and lay-comp
in an avg of 60 times per second (fps) [it depends in the freq (Hz) of your machine].
yes, 60 times per sec from scratch.
whether you ‘see’ it or not it still gets parsed/rendered
large dom => low performance

i mean simple popup+checkbox-list

here => Framework7-Vue Starter - JSFiddle - Code Playground
group-title is missing in your ‘fixed’ smart-select

also:
two week ago i have tried to play with this => List Index with Virtual List
i tried to add group-title (something like virtual-list-vdom + contact-list + indexed-list)
and it’s not an easy task

you can play with this => boring-noyce-7h1yyb - CodeSandbox
it will give you some idea

IndexList-select is a little bit buggy (can’t make it work)

1 Like

Like I said if the dom elements are with display:none. The rendered is smart and wont reflow/paint those, of course if they are like that from start. A switch from block to none would trigger a reflow+repaint… But in this case the smart select options are not visible from start the is display-none. Now I believe in the DOM should take some space which can create a different type of lag, and I’m aware of that, and hope to fix. Because I notice large list takes longer to open the list popup than smaller lists.

Now I do see the issue with the title group, and the layout css is not yet fully correct during search. I’m trying to work on it.

The main goal to use the smartSelect is to do less customization as possible, and with the smart select i would have the “selected option” logic working already, when I re-open the smartSelect etc… And if i was to do by my own I would need to deal with that too. For my needs at least this will work.

fake-smart-select + virtual-list
here => frosty-forest-n38567 - CodeSandbox
you (or someone else) may find it useful

Well the issue, it seams is that, the virtual list calculation of heights is not taking into account item dividers or group title different heights, and then the main UL height is not exactly the right size, which makes a ::after border appear overlaying the items. Also if using filtered search, it looses the groups…
Also I believe the top position that shifts with scroll is not taking into account those group titles heights being different…

I’ve trying to hack into this but its very time consuming. Would be great if we simple could simple tell the smart select to use a virtual list, and have the calculations right…
@nolimits4web

@nolimits4web Actually i believe there is a bug in the way your virtual list are calculated, they just assume they have the height givin in the params , which can be different from ios to MD, but, you are not taking into account that if the item in the array isLabel=true they should use 31 for ios for example, this explains why the virtual list looks strange lines overlay, or missing items due to wrong calculation of ehight/list heigh, since they height is not the sum of items.length*params.height!

also this function of scroll, is not taking into account if the index being worked on is a divider or not.
image

This too, is wrong, cant assume its the same height, since there are 2 different heights.