Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dropdown with unselectable index 0 will not scroll to top on arrow_down with last index selected #2483

Closed
Slowey opened this issue Jun 17, 2020 · 3 comments
Labels

Comments

@Slowey
Copy link

Slowey commented Jun 17, 2020

Demo:
https://plnkr.co/edit/k2xl65uBG8xsFVaX

Steps to reproduce:

  1. Create a dropdown with an options group at element 1
  2. Fill your dropdown with enough items to trigger a scrollbar (data-size=5 and 10 elements should do)
  3. Open the dropdown and use arrow down to traverse the dropdown until you are at the last item.
  4. Hit arrow down one last time. The selector will select the correct item, but your scroll bar will not be set to the top.

Environment:
Boostrap 4
Boostrap-select 1.13.17
jQuery version 3.4.1
Windows 10
Chrome 83.0.4103.97

Code that seems buggy:
bootstrap-select.js

line: 2876-2881:

else if (e.which === keyCodes.ARROW_DOWN || downOnTab) { // down
            index++; 
          if (index + position0 >= that.selectpicker.view.canHighlight.length) index = 0;

          if (!that.selectpicker.view.canHighlight[index + position0]) {
            index = index + 1 + that.selectpicker.view.canHighlight.slice(index + position0 + 1).indexOf(true);
          }
        }

This code selects the first highlightable index. In this case index = 1

Further down in the scroll to top code:
line: 2901-2911:

else if (e.which === keyCodes.ARROW_DOWN || downOnTab) { // down
          // scroll to top and highlight first option
          if (index === 0) {
            that.$menuInner[0].scrollTop = 0;

            liActiveIndex = 0;
          } else {
            activeLi = that.selectpicker.current.data[liActiveIndex];
            offset = activeLi.position - that.sizeInfo.menuInnerHeight;

            updateScroll = offset > scrollTop;
          }

Only scrolls to top if index === 0. Since index 0 is not highlightable. This has to check for the first highlightable index and not 0.

BR,
Lucas

@Slowey
Copy link
Author

Slowey commented Jun 22, 2020

Tried the changes locally, seems to be working. Thanks!

@Slowey Slowey closed this as completed Jun 22, 2020
@caseyjhol
Copy link
Member

Released in v1.13.18!

@erdincozer
Copy link

erdincozer commented Aug 13, 2021

I think I found a simple solution to this problem.
$('#country').selectpicker('destroy');
this code solves the problem.
Maybe you need to make similar changes as well.
$('#country').empty();
$('#country').html('<option value="-1" selected = "selected">- Please Country Select-</option>');
$("#country").val(-1);
$.ajax({ .........
In this way scroll to top

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants