snapappointments / bootstrap-select

:rocket: The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more.
https://developer.snapappointments.com/bootstrap-select/
MIT License
9.85k stars 2.72k forks source link

Virtual scroll breaks on last chunk. #2686

Open SuperCrunchTime opened 2 years ago

SuperCrunchTime commented 2 years ago

When one scrolls down to the last chunk, around this area of the select-picker code

if (currentChunk === undefined && scrollTop - 1 <= that.selectpicker.current.data[endOfChunk - 1].position - that.sizeInfo.menuInnerHeight) { currentChunk = i; } } if (currentChunk === undefined) currentChunk = 0;

the currentChunk variable is undefined and defaults to zero. This causes some items within the final chunk to not show, and makes the selectpicker display a blank space.

This was found on firefox (94.0.2),Windows 10 64-bit. I am using jquery version 3.6.0, bootstrap select version 1.13.14 (The most current version on the https://developer.snapappointments.com/bootstrap-select/ website), and bootstrap 4.3.1.

Fixed this by changing the line

if (currentChunk === undefined) currentChunk = 0;

to

if(that.selectpicker.current.data[endOfChunk - 1]&&(currentChunk === undefined&& scrollTop - 1 > that.selectpicker.current.data[endOfChunk - 1].position - that.sizeInfo.menuInnerHeight)) { currentChunk=chunkCount-1; } else { currentChunk = 0; }

Problem test case: https://plnkr.co/edit/nNFQKbnTxEql8oDA (Scrolling the selectpicker list all the way down to the bottom causes a zeroing out of the currentChunk variable)

NicolasCARPi commented 2 years ago

Hello,

Thank you for the complete bug report. Can you also reproduce this with the latest code from main branch? Do you want to make a PR for that change?

sockless-coding commented 2 years ago

Hello,

I ran in to the same issue today, the suggested fix does not work for my case... In my case, the issue is caused by a rounding issue where that.sizeInfo.menuInnerHeight has a decimal point greater than .5. Flooring the that.sizeInfo.menuInnerHeight seems to solve the issue, but this needs further investigation...

NicolasCARPi commented 2 years ago

@sockless-coding please kindly make a PR or a clear comment on what changes are needed if you manage to pinpoint the issue!