The dropdown closes after clicking the draggable scroll button

[Iva-rgb]

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

1. Click on the dropdown containing the countries to open it.
2. On the right side there is a scrollbar.
3. Click on the draggable scroll button to try and move it upwards or downwards.
4. 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

[superVoja]

@Iva-rgb How did you fix this issue? I'm having the same problem

[Iva-rgb]

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.

[jiayi1129]

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");
  }
}