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

Closing an open dropdown with characters in live-search field using escape breaks keyboard scrolling for the next time you open the dropdown #2583

Open
Slowey opened this issue Mar 8, 2021 · 1 comment
Labels

Comments

@Slowey
Copy link

Slowey commented Mar 8, 2021

Hey,

I'm working on keyboard support and found a bug with live-search and scrolling an open dropdown using the arrow keys.

Reproduction steps:
1). Click slightly above the dropdown.
2). Press Tab to focus on the dropdown.
3). Press Arrow down to open up the dropdown.
4). Type anything in the live-search field (might need 2 or more chars).
5). Press escape to close the dropdown.
6). Press arrow down to open up the dropdown.
7). Press arrow down until you reach the last visible option and press down one more time.
Now the scrollbar does not move.

If you press escape without typing in the live-search field and reopen then functionality comes back.

Plnk to test: https://plnkr.co/edit/OdmHnDiI52hjbZYW

Thanks for looking into this, I think this component is great.

Environment:
Boostrap 4
Boostrap-select v1.13.18
jQuery version 3.4.1
Windows 10
Chrome 88.0.4324.190

@Slowey Slowey added the bug label Mar 8, 2021
@Slowey
Copy link
Author

Slowey commented Mar 15, 2021

The issue seems to stem from live-search removing options from the dropdown. Closing the dropdow with 0 options available causes the menuInnerHeight variable to be NaN on the next open.

I made a change which gives me the functionality I want for the ESC key:

if (e.which === keyCodes.ESCAPE && isActive) {
if (that.options.liveSearch) {
that.$searchbox.val("");
that.refresh();
}

e.preventDefault();
that.$button.trigger('click.bs.dropdown.data-api').trigger('focus');
}
However the bug persists if I close the dropdown by clicking somewhere else on the site. I tried hooking the above code into hide but it did nothing.

I don't think my fix is up to par but it will do for now.

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

1 participant