I am using a select2 dropdown within a modal pop up window.
On mobile, when I select the select2 input, and attempt to scroll, the window does not scroll down. This means that, on mobile, if I click on the select2 box when it is in the bottom half of the screen, the keyboard sits over the input which cannot be seen.
This is my form, on desktop. The first textarea is a select2 input.
In this example I have clicked on my select2 box that is just below the radio buttons, the keyboard shows, and it is impossible to scroll down to see the input box.
Here I have added the below code, which has allowed scrolling as desired, but shows how the "Please enter 2 or more characters" tooltip does not scroll, as it is absolutely positioned.
$('.js-example-basic-multiple').on('select2:open', function (e) {
const evt = "scroll.select2";
$(e.target).parents().off(evt);
$(window).off(evt);
});
Is there a way to have scrolling that doesn't have the tooltip element floating? Is there a better alternative? I'm just trying to have a nicely formatted dropdown from a small dataset that I have on page in code.