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

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