If a select2 box is clicked on the very bottom the first option is unintentionally selected.
This happens because on the mousedown the dropdown is opened, the cursor is now on the first option, and on the mouseup the option is clicked.
In my case the user wants to open a product attribute filter, but unintentionally selects the first option with the click on the select box. The whole page reloads because the form is automatically submitted.
I tested this in the browsers Chrome, Firefox and Safari. The issue occurs in all of them.
If a select2 box is clicked on the very bottom the first option is unintentionally selected.
This happens because on the mousedown the dropdown is opened, the cursor is now on the first option, and on the mouseup the option is clicked.
In my case the user wants to open a product attribute filter, but unintentionally selects the first option with the click on the select box. The whole page reloads because the form is automatically submitted.
I tested this in the browsers Chrome, Firefox and Safari. The issue occurs in all of them.
You can try it yourself with one of the samples.
The original select2 library doesn't have this issue.
I temporarily fixed it by putting the options a few pixels down:
.select2-dropdown { padding-top: 2px; }But would be happy about a real fix. Thank you!