Dropdown select not working on mobile Safari (iOS)

Is this a bug?
#1

The select State dropdown on the billing address form does not work on mobile Safar (iPhones)i. Nothing happens when the dropdown is tapped. Appears to work on Android.

I found this answer on stack overflow, but I’m not 100% this is my issue. Any recommendations on how to troubleshoot or referrals where I can find someone knowledgeable of this issue that can help?

IMG_1115

#2

I have no specific experience with mobile Safari, but I do have a few troubleshooting questions:

  1. Have you tested the form on desktop Safari, and does it work there? (If not, you can probably debug your issue in desktop Safari, and that will probably fix it in mobile Safari too.)
  2. Are you using any other JS frameworks (such as Bootstrap), apart from jQuery, to create your page/app?
  3. The StackOverflow post you linked to only has one response related specifically to mobile, and that’s for the jQuery mobile popup. Are you using that in your page/app? If so, did you try that solution, and did it work?
  4. Have you tried any of the solutions in the SO post?
#3

I use select2 in a plugin on WordPress, and a user reported that the select2 dropdown has to be touched (clicked) twice in order to open on safari mobile. The user reckons it has to do with the search text field embedded in the select2 dropdown and that Safari somehow requires a double click to activate the dropdown.

Can @kjn confirm this?

Why Select2 does not work well on iOS Device?
#4

Really in (IOS)Safari you have to click twice, absurd. and I thought that select2 wasn’t working with the dropdown due to CSS problems (which usually occurs in Safari).

my solution:

        $('.select2-container')
            .off('touchstart')
            .on('touchstart', function (e) {
                e.stopPropagation();
            })
            .siblings('select')
            .off('select2:open')
            .on('select2:open', function () {
                $('.select2-results__options')
                    .off('touchstart')
                    .on('touchstart', 'li', function (e) {
                        e.stopPropagation();
                    });
            });
1 Like
#5

thanks for the solution, I hope the select2 team picks up on this.