CODEWITHSUNDEEP
javascriptjquerycordovajquery-mobilejquery-mobile-select
pmitoraj
pmitoraj

Reputation: 41

select options shown twice when select box is touched

It is an android application made with cordova. The form has multiple select boxes. When select box is tapped the options are shown in the native android style, however it flickers. When you select option, options disappears and the text on option box is not updated. Nothing was selected. It works on the second attempt.

Every second attempt to pick option from select box works as expected. Interestingly it does not have to be the same select box. Just every second attempt on any selectbox allows to pick the option.

Using jquery mobile 1.4.5 and jquery 2.2.3. It works properly with jquery mobile 1.3.2

Edit1

Android 6.0.1

When the page is loaded, for each select box a function is run to populate the options:

function populateLocationOptions() {
  $("#addLocation option").each(function() {
    if ($(this).val() != 'Option') {
      $(this).remove();
    }   
  }); 

  var locations = getLocationArray();

  for (var i = 0; i < locations.length; i++) {
    sLocationOption = "<option value=\"" + locations[i].id + "\">" + locations[i].name + "</option>";
    $("#addLocation").append(sLocationOption);    
  } 
  $("#addLocation").selectmenu('refresh', true);
}

HTML portion where select box is defined:

<label for="addLocation" class="select"></label>
<select name="Location" id="addLocation" data-theme="c" >
  <option value="Option" data-i18n="addpage.location">Select Location</option>
</select>

Edit2

Works properly with Android 5.1.1

Edit3

Minimal example to reproduce the issue on Android 6.0.1 and cordova 6.0.0. It is index.html from vanilla boiler plate made with cordova create

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css"/>
<script src="js/jquery/jquery-2.2.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery/jquery.mobile-1.4.5.min.js"></script>

<title>Hello World</title>
</head>
<body>
<div data-role="page" id="add">
  <div data-role="header">
    <h1 id="addPageHeader" data-i18n="addpage.header">Flicker example</h1>
  </div>
  <div data-role="content">
    <select name="Time" id="selectTime" data-theme="c">
      <option value="Option">city</option>
      <option value="Option">Paris</option>
      <option value="Option">New york</option>
      <option value="Option">London</option>
      <option value="Option">Madrid</option>
    </select>
  </div>
  <div data-role="footer" data-position="fixed" data-tap-toggle="false" data-id="footer">
    <div data-role="navbar">
      <ul>
        <li><a href="#diary" data-transition="none" data-icon="bars">List</a></li>
        <li><a href="#add" data-transition="none" data-icon="plus">Add</a></li>
        <li><a href="#settings" data-transition="none" data-icon="gear">Settings</a></li>
      </ul>
    </div>
  </div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

Surprisingly, the issue disappears when data-position="fixed" attribute is removed from footer div.

Upvotes: 1

Views: 1993

Answers (2)

Danbardo
Danbardo

Reputation: 859

I have this problem while testing on android 5.0.1.

For the most part putting this on document ready solves the problem:

$("select").on('vmousedown', function(e) { $(this).focus().click(); });

I found the problem still occurs every now and then, sometimes if you very quickly close and open the select window.

Upvotes: 0

pmitoraj
pmitoraj

Reputation: 41

I did not manage to get this problem resolved using data-position="fixed". I removed the attribute and used custom css to achieve the same effect. It is a tweaked solution that was used before jquery mobile supported data-position attribute. The css file listed below is loaded after jquery mobile css. 

body,
.ui-page {
      min-height: 100% !important;
          height: auto !important;
        }
.ui-content
{
  margin-bottom: 56px; /* footer size */
}

.ui-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

My gut feeling is that this is jquery mobile not working properly with webview from Android 6.x.

Upvotes: 0

Related Questions