Why Select2 does not work well on iOS Device?

Question

I'm using library select2 from Pixels Admin Template. I noticed that it is working well on desktop and android device. Yet, the drop down does not open when viewing on iOS device. I did not know why it is.

$(document).ready(function() {
  var init = [];

  init.push(function() {
    var $select2 = $("#Salutation,#Gender").select2();
    $select2.on('select2:select select2:unselect', () => {
      $(":focus").blur();
    });
  })

  window.PixelAdmin.start(init);
});

body .select2-container.select2-container--default.select2-container--open {
  top: 305px!important;
  left: 22px!important;
}

.select2.select2-container.select2-container--default.select2-container--below.select2-container--open {
  top: auto!important;
}

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Select2</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="pixel-admin.min.js"></script>
<link rel="stylesheet" href="pixel-admin.min.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-4 col-xs-offset-4">
      <h3>Application Form</h3>
      <form class="form" action="/action_page.php">
        <div class="form-group">
          <label for="GivenName">Given Name:</label>
          <input class="form-control" type="text" id="GivenName">
        </div>
        <div class="form-group">
          <label for="Surname">Surname:</label>
          <input class="form-control" type="text" id="Surname">
        </div>
        <div class="form-group">
          <label for="Salutation">Salutation:</label>
          <select class="form-control" name="" id="Salutation">
            <option value="Mrs">Mrs</option>
            <option value="Mr">Mr</option>
            <option value="Miss">Miss</option>
          </select>
        </div>
        <div class="form-group">
          <label for="Gender">Gender:</label>
          <select class="form-control" name="" id="Gender">
            <option value="Female">Female</option>
            <option value="Male">Male</option>
            <option value="Transgender">Transgender</option>
          </select>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
  </div>
</div>

I included pixel-admin js for you here.

Note It works when I use Request Desktop Site feature on iOS device.

Any suggestion? Please kindly help me. Thanks

Azerbaijani

3.4.5 is nearly five years old, and there are plenty of fixed bugs raised againt iOS on their github. Can you try a newer version of select2? – Talca

@Rup, understanding about this fixed bug, however I was unable upgrade it to current version 4 in this pixel admin template as all libraries were compiled into one file. By using include from external, it is not possible for hidden field as newer version used different method. At all, my project use select2 v3..4.5 Solely. Thanks. – Azerbaijani

Some bugs in this version, I've tried to solved in JS script. – Azerbaijani

do you mean as ipa file or in ios browser ? – Forewing

@AhmedShahin I mean iOS browser. – Azerbaijani

ok i just got it to work , do you want to make it work in pixel.js or i can use any other alternative librarries like select2.js ? – Forewing

if you want i can show it to you in simulator – Forewing

@AhmedShahin it is great, I would like it to work in pixel js of select 2 work on iOS just same as on desktop and android. Very much Thanks – Azerbaijani

hold on pls i am uploading in 2 minutes – Forewing

@AhmedShahin ok thanks – Azerbaijani

check this link mobiles.sacodeco.net/carscontracting/index.html – Forewing

am writing CSS file for u now – Forewing

i test it on safari ios .. is it working for you ? – Forewing

Let us continue this discussion in chat. – Forewing

@AhmedShahin, thanks, I ran it on my iphone6 iOS 11.3, it become a simple select element not select2. is it a css problem? – Azerbaijani

@AhmedShahin, thanks, it still does not work. – Azerbaijani

am done , soon i will finish it , just trying to make additional stuff :) – Forewing

First, you need to fix your code snippet. Second, you're initializing select2 twice unnecessarily. You can simply save select2 in a variable before attaching event to it. var $select2 = $("#Salutation,#Gender").select2(); $select2.on('select2:select select2:unselect', selectionHandler); – Obolus

@jeetaz, thanks, edited and tested, it still does not work, thought. – Azerbaijani

@HouyNarun Can you create a jsfiddle or host it somewhere Or fix your code snippet so I can look at it? – Obolus

@jeetaz, very thanks, let me prepare code snippet and will let you know here. Thanks. – Azerbaijani

@Obolus problem is what he wants to show the drop menu view as browser view from mobile with the same functionality,t's not actually question , its a complete project &library is expired , you have to adjust manual select2.js , pixel-admin , bootstrap , all the stuff are connected to each other , i am swearing that i fixed over 1000 error so far and counting, worst part is mobile , they disabled the drop down listing and their default have to be used , many stuff in here i been working on it since three days and the good news is i just finished and i don't know how am gonna explain it – Forewing

Answer 1

i have done 2 pages for you , the first one contain the drop menu that will remain same view , same functionality over mobile and desktop browsers . please open it through mobile browsers ,

click here to view it ...

for the second page , i have adjusted the code and the drop down list should now work along with pixel & select2 libraries keeping also the same view as well on the mobile / desktop browser ,

you will be able to use them on mobile browser by double click on each drop down menu to open it and select a value , i have left it for you like that so you can change it based on onclick event it will hide menus upon selection for desktop or mobiles browsers.

// show/hide the menu when examples is clicked
$(".dropdown-toggle").on("click", function () {
$(".dropdown-menu").toggle();
});

// for navigation

$("#nav").on("click", "li", function () {
$("#menu-icon").click();
document.getElementById("flag").focus();
//$("#nav").slideToggle();
}); 

and for mobile browsers you can use the below to hide the menus

$(document).on('click touchstart', function () {}

please check the links and find used resources/files

click here to view it ...

the remaining work should be CSS and styling code , you can control that as you like as i see it pointless to adjust the fields without taking your views on it .

as for explanation how i could achieve this task , actually , i had to restrict the way of java-script loading , beside that i have edited almost all the the js libraries and load them through scripts J.S during j query fallback .

Here is the steps to achieve this :

First :

load jquery library through fallback

Second :

load admin-pixel.js load your-pixel.css

Third Step :

load select2.js load select2.css

they have to be loaded in sequence and finally after loading the above you have to write this code so the drop down menu view do not change on mobile browser and it will remain the same functionality as desktop browsers , put them on script tag after loading the J query first then loading the select 2 library

$('select').select2({
minimumResultsForSearch: -1
});

Final steps :

you have to write these Meta Tags and css on your html page

<meta HTTP-EQUIV="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta id="viewport" name="viewport" content="width=device-width,initial- 
scale=1.0,user-scalable=no">

CSS Code place it on " " tags:

html {
touch-action: manipulation;
}

As per your request the task is done and you may go through the code on all files to see how js libraries loading in sequence you can download all resources along with html page

through this link ,

Alternative solution for you is , away from your libraries , you may create drop down list fields which they have no issue functioning on mobile browser , then use them on the page which have problems , and upon user selection on these working drop down lists fields , trans-fare / move the value to the broken one belongs to select2 ( do it through java-script and hide the broken drop menu with display:none;

it might seem silly to do that but this is way much faster than going through all these errors which you can face during development for the depreciated library which you are using ....

let me know if there is any issue you are facing since i can't perform a test on your production server. i will be editing my answer eventually for adjusting my answer .

good luck

Forewing

Answer 2

In case you are still experiencing this problem: I encountered the same problem with the same template on a legacy project and stumbled upon your post. The template has a dependency on a certain version of Fastclick for mobile devices in the pixel-admin.js. Upgrading the Fastclick library in it will solve this for the select2 input fields. However it will not solve the problem with checkboxes and radio buttons (they require double clicks to be checked or selected). Removing the dependency on Fastclick solved it for us in this case.

Foreside

Answer 3

Not sure what you're trying to achieve, but if you want to push your calls into array, you can do it like below:

var init = [];
init.push(
    $("#Salutation,#Gender").select2().on('select2:select select2:unselect', function () {
        $(":focus").blur();
    })
);

OR you can use IIFE like below:

var init = [];
init.push(function () {
    var $select2 = $("#Salutation,#Gender").select2();
    $select2.on('select2:select select2:unselect', () => {
        $(":focus").blur();
    });
}());

Obolus

thanks, it is not about array problem, it is about select2 issue on iOS device not working well. You would see how it is, clearer than my explain, if you download my included script from my question section and run test on your iphone. – Azerbaijani