title: Select2 Friendly on mobile
body: <p>I'm aiming to make select2 friendlier on mobile devices and so I'm using css styles to display the result of select2 items above all elements of the page.</p>
  
  <p>I am able to do this, however I have a problem related to the click event in the select. If I call select2 manually (not by the select control), the result is displayed correctly, however when I click directly on the select control, the result is displayed, but apparently the click event on the select control propagates as if it were clicked on an options of the select, causing the results screen to be closed shortly after opening.</p>
  
  <p>Example:</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="main" style="margin-top: 150px;"&gt;
      &lt;select id="example" class="js-example-basic" style="min-width: 200px; margin-top: 200px"&gt;
          &lt;option value="1"&gt;Option 1&lt;/option&gt;
          &lt;option value="2"&gt;Option 2&lt;/option&gt;
          &lt;option value="3"&gt;Option 3&lt;/option&gt;
          &lt;option value="4"&gt;Option 4&lt;/option&gt;
          &lt;option value="5"&gt;Option 5&lt;/option&gt;
          &lt;option value="6"&gt;Option 6&lt;/option&gt;
      &lt;/select&gt;
      &lt;button id="openSelect"&gt;Show as Popup (Correctly)&lt;/button&gt;
      &lt;/div&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>Css</p>
  
  <pre><code>.overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.5);
      z-index: 9999999;
      font-size: 18px;
      -webkit-transition: all .4s;
      transition: all .4s;
  
  }
  
  
  .select2-results {   
      height: 90% !important;
  }
  
  
  
  
  .select2-results__options {
      max-height: 100% !important;
      height: 100% !important;
      overflow-y: scroll !important;
  }
  
  
  
  
      .select2-dropdown--below {
      display: block !important;
      position: fixed !important;
      top: 0px !important;
      left: 0px !important;
      background: white !important;
      width: 250px !important;
      height: 100%;
      z-index: 3000 !important;
  
  }
  </code></pre>
  
  <p>JQuery</p>
  
  <pre><code>$(document).ready(function() {
  
  
  $('#example').select2({
  });
  
  
  });
  
  $("#openSelect").click(function() {
  
  $('#example').select2("open");
  
  });
  
  
  $('#example').on('select2:opening', function (e) {
    $('body').addClass("overlay");
  });
  
  $('#example').on('select2:closing', function (e) {
    $('body').removeClass("overlay");
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/m7n8Lsgc/" rel="nofollow noreferrer">https://jsfiddle.net/m7n8Lsgc/</a></p>
  
  <p>I suppose it might be possible to intercept just the click on the select through the 'select2: opening' event, but I'm not getting any success on it.</p>
  
  <p>Any suggestions on how to get around this?</p>