Выберите опции, показанные дважды при касании поля выбора

Это приложение для Android, созданное с помощью Cordova. Форма имеет несколько полей выбора. При нажатии на поле выбора параметры отображаются в собственном стиле Android, однако он мигает. При выборе параметра параметры исчезают, а текст в поле параметров не обновляется. Ничего не было выбрано. Работает со второй попытки.

Каждая вторая попытка выбрать опцию из поля выбора работает как ожидалось. Интересно, что это не должно быть то же самое поле выбора. Просто каждая вторая попытка в любом окне выбора позволяет выбрать опцию.

Использование jquery mobile 1.4.5 и jquery 2.2.3. Он работает правильно с JQuery Mobile 1.3.2

Edit1

Android 6.0.1

Когда страница загружена, для каждого поля выбора запускается функция для заполнения параметров:

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, где определено поле выбора:

<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

Работает правильно с Android 5.1.1

Edit3

Минимальный пример для воспроизведения проблемы на Android 6.0.1 и Cordova 6.0.0. это index.html из ванильного котла 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>

Удивительно, но проблема исчезает, когда data-position="fixed" атрибут удален из footer дела.

Источник

2 ответа

У меня есть эта проблема при тестировании на Android 5.0.1.

По большей части размещение этого документа готово решает проблему:

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

Я обнаружил, что проблема все еще возникает время от времени, иногда, если вы очень быстро закрываете и открываете окно выбора.

Источник

Мне не удалось решить эту проблему с помощью data-position="fixed", Я удалил атрибут и использовал пользовательские CSS для достижения того же эффекта. Это улучшенное решение, которое использовалось до поддержки jquery mobile data-position приписывать. Файл css, указанный ниже, загружается после 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%;
}

У меня такое ощущение, что это jquery mobile не работает должным образом с веб-браузером из Android 6.x.

Источник
Другие вопросы по тегам