Mobile Cant Touch First Option

[cengizilhan]

Describe the bug

In mobile view (chrome > inspect > iphone 12)
i cant select first item sometimes.
for example:
https://choices-js.github.io/Choices/
Custom templates > i cant select angular. ( you have to click bottom)

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://choices-js.github.io/Choices/ and open mobile view'
2. Click on 'Custom templates > angular' ( or Form interaction > Option 1 )
3. See error

Expected behavior
Its can be selected easyly such as others

its can be selected such as others.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome
• Version 121 ( Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36 )

Additional context
Also if you know how can i debug css for open dropdown state. let me know please

i guess: i found the bug. because padding:10px, inline height around 10px. you can select the padding area only. and if you do 15-20px padding. its will be fix.

edit2:
when i write "searchEnabled: false," its fixed.

[cengizilhan]

my temporary solution is:

const isMobile = window.matchMedia('(max-width: 600px)').matches;
let ChoiceOptions = {
itemSelectText: '',
shouldSort: false,
shouldSortItems: false,
allowHTML: false
};
/*search disabled temporary for mobile touch bug */
const ChoiceOptionsMobile = {
itemSelectText: '',
shouldSort: false,
shouldSortItems: false,
allowHTML: false,
searchEnabled: false
};
isMobile ? ChoiceOptions = ChoiceOptionsMobile : false;
const ChoiceCountry = new Choices(inputCountry, ChoiceOptions)

// solution 2:
dont override that class or override padding:7.5px !important;

.choices__list[aria-expanded] .choices__item {

 @media screen and (max-width: $mobile-max-width) {
    padding: 7.5px !important;
 }
}

// and
.choices__list--dropdown .choices__list{
padding-top:10px;
}