Scrolls to bottom when option selected

Is this a bug?
#1

I made a form with 2 selectors using the Select2 to display a big list of hotels and everything works fine on all OS and all the browsers except with Safari. The problem is that when you click on the selector and then select one of its options it makes a scroll to the bottom of the page. I looked around on Google to see if there was a solution to this and I did find some forums with the same issue from a time ago but I couldn’t resolve it with the answers they gave.

You can see what happens here: https://gyazo.com/215ddb46886a8e97172d0e87e3b8975d

I’m doing a enqueue for both CSS and JS 4.0.7 version from their CDN as they show on their page. And even if I don’t do the enqueue the Woocommerce plugin calls it directly from it’s assets directory.

Remember, it only happens on Safari.

Scrolls to bottom when option selected (iframe)
#2

I don’t have access to Safari on iOS, so I can’t really troubleshoot this issue for you. So let me ask a few questions that might help you troubleshoot it yourself.

  1. Does the URL in the address bar change when you make the selection (for example, getting a “#xyz” hash reference added to it)?
  2. Does the scrolling behavior happen with both selectors, or only the first one?
  3. Do you have any event handlers for Select2 events that could be causing the scrolling?
  4. Is there anything beneath the Select2 dropdown that could be receiving the click and scrolling to the end of the page?
  5. Does the scrolling behavior happen if you use the keyboard to select an item, rather than clicking it with your mouse?

Let me know the answers and I’ll see if I can help you further.

Also, can you list some of the URLs that offered suggestions to fix this issue (although I understand they didn’t work for you).

#3

Sure, no problem:

  1. The URL doesn’t add anything after the .com/, there is not hash reference added after it.
  2. It happens with every selector I created with the Select2 functionality, I’m even using it on the single product page of the site and it’s still happening.
  3. I’m not using any event handlers, I just use the .select2() on the <select></select> element as it follows on this pastebin you can see in there how simple I’m using it. Don’t mind the tags with {{example}} that just have to see with Mustache (you can look it up on GitHub and Google).
  4. There is no other element beneath this Select2, not even an anchor that could cause this behavior.
  5. It still scrolls by selecting an item with the keyboard.

And here are some of the posts I found before (as a new user I can only post two links but you can see this Pastebin with all the links):
https://pastebin.com/9yp4x4i3

I found a little more but this was the most precise with the problem I’m having.

Thanks!

#4

Ok, this definitely sounds like a bug in Select2. The question is what to do about it. Since I can’t experience the issue personally (because I don’t have an iOS device), I can only give a suggestion. And that would be to add an event handler to the first <select>, either on the change:select2 or the select2.close event that sets focus to the next <select>. Attach a similar handler to the second <select> that sets focus to the next logical thing on the page that should receive focus (even if its just a <div> or some other element (with `tabindex=“0”) so it can only be focused programmatically). You might have to experiment to figure out which is the best event to use.

Let me know how it goes, and if that doesn’t work maybe I can think of something else to try.

#5

I tried with the on('select2:close') as told in the Select2 events page and that kinda worked but it still scrolls to the bottom when nothing is selected and you click outside the selector, I thought this could be fixed with the select2:closing event but it did not work.
I added the code just like this (you can see what elements I’m selecting on the previous PasteBin) see image below

You can see the reaction on this GIF I made: https://gyazo.com/977c91387fe0ba2227d43957e9b2e23e
I even tried with the select2:select event but I think this issue is happening when you close the dropdown.
I added the same event handler for the second selector (program selector) to focus the number of person input on the right and there is not even a little scroll with this one it works normally:
https://gyazo.com/8bd61b39f9ff3fc26bc8c35013709b75

This is how I put the code:
image

I hope I explained everything as detailed as possible.

#6

Yes, your explanation was very detailed.

It’s interesting that the bug doesn’t happen with the second Select2. I wonder what would happen if you swap the two Select2s in your HTML source code. My guess is that the bug would then affect the Program selector.

The DOM elements that Select2 adds to the page to render the widget’s dropdown are, by default, added at the very end of the HTML document. I wonder if this is what’s causing Safari to scroll to the bottom of the page. You can override the placement of the dropdown DOM elements using the dropdownParent configuration property. So you might try attaching the dropdown to the HTML element that directly contains your HTML <select> elements and see if that eliminates the scrolling in Safari.

1 Like
#7

That fixed my issue! There is no more scroll.
I used the dropdownParent just as you told me and I set the element to the .booking-container and that worked. I can’t tell why this bug was actually happening.
I did it just like this:
image

Thanks a lot!

1 Like
#8

Awesome! I’m glad I was able to help you. My guess is that this is some weirdness with Safari’s rendering engine. In an case I’m glad you have a solution.

1 Like
#9

Thanks a lot for your support!