The dropdown closes after clicking the draggable scroll button
Iva-rgb opened this issue · comments
Describe the bug
NOTE: The number input component must be in a modal.
When you open the dropdown containing the countries and try to click on the draggable scroll bar button the dropdown closes, not allowing the user to scroll through the countries by dragging it.
Steps to reproduce
- Click on the dropdown containing the countries to open it.
- On the right side there is a scrollbar.
- Click on the draggable scroll button to try and move it upwards or downwards.
- After the click the dropdown closes.
Expected behavior
The user should be able to use the draggable scrollbar button.
Screenshots
Device
- OS: Windows 10
- Browser: Microsoft Edge, Version 96.0.1054.41
- Package version: ^1.1.12
@Iva-rgb How did you fix this issue? I'm having the same problem
In my case I was using this component in a modal and the modal had a property tabindex = -1.
So every time I clicked the scrollbar it was like clicking outside of the dropdown area so it closed automatically.
If you are having this issue check for properties that would toggle the hierarchy in your DOM tree, maybe z-index or like I said tabindex.
For anyone's future reference, this is how I fixed it:
mounted() {
const countrySelectorList = document.getElementsByClassName(
"country-selector__list"
);
for (const countrySelector of countrySelectorList) {
countrySelector.setAttribute("tabindex", "1");
}
}