jQuery UI selectmenu не открывается при первом нажатии на диапазон - PullRequest
Новая
       13

jQuery UI selectmenu не открывается при первом нажатии на диапазон

0 голосов
/ 25 февраля 2020 

(function dropdownInit() {
  var myDropdown = $("#myDropdown");
  myDropdown.selectmenu();
})();

$(document).on(
  "keyup click change beforecut selectionchange",
  "#myTextArea",
  function(e) {
    setButtons();
  }
);

function setButtons() {
  var textArea = $("#myTextArea");
  var myDropdown = $("#myDropdown");
  if (textArea.length && textArea.val().length > 0) {
    myDropdown.attr("disabled", false);
    toggleDropdown();
  } else {
    myDropdown.selectedIndex = 0;
    myDropdown.attr("disabled", true);
    toggleDropdown();
  }
}

function toggleDropdown() {
  var myDropdown = $("#myDropdown");

  if (myDropdown.attr("disabled")) {
    myDropdown.addClass("myInput--disabled");
  } else {
    myDropdown.removeClass("myInput--disabled");
  }
  myDropdown.selectmenu("refresh");
}
body {
  font-family: sans-serif;
}

.myContainer {
  display: flex;
  align-items: flex-start;
}

.myDropdown {
  border: 1px solid black;
  cursor: pointer;
}

.myDropdown:disabled {
  cursor: not-allowed;
}

.textArea {
  margin-right: 16px;
}

.myDropdown {
  border: 1px solid black;
  cursor: pointer;
}

.ui-selectmenu-menu {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.ui-selectmenu-menu.ui-selectmenu-open {
  display: block;
}

.ui-menu {
  list-style-type: none;
  display: block;
  padding-left: 0;
  margin: 0;
}

.ui-menu .ui-menu-item {
  cursor: pointer;
}

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  background: blue;
  color: white;
}

.ui-selectmenu-button {
  border: 1px solid black;
  width: 200px;
  cursor: pointer;
}

.ui-selectmenu-disabled {
  cursor: not-allowed;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./src/styles.css" />
  </head>

  <body>
    <div class="myContainer" id="app">
      <textarea id="myTextArea" class="textArea"></textarea>
      <select id="myDropdown" class="myDropdown" disabled="disabled">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
      </select>
    </div>
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"
    ></script>
    <script
      src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
      integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
      crossorigin="anonymous"
    ></script>
    <script src="./src/index.js"></script>
  </body>
</html>

Мой код выполняет функцию, которая запускается на keyup click change beforecut selectionchange текстовой области. По сути, в конце функции я вызываю метод refresh из меню выбора, поскольку я хочу применить разные стили для отключенного состояния. Как вы, вероятно, знаете, это обновляет ui-id элемента, что, по моему мнению, является основной причиной моей проблемы. Я наблюдаю следующее поведение:

Запись в текстовой области позволяет выбрать меню. Более того, каждое нажатие клавиши меняет ui-id. Если после этого я щелкну непосредственно по тексту, содержащему интервал выбора, он не откроется, а вместо этого ui-id снова изменится. При повторном нажатии в меню выбора открывается его, и ui-id не изменяется .

Я не могу удалить событие change, поскольку оно включает в себя копирование / вставку с помощью щелкнув правой кнопкой мыши. Кроме того, я хочу сделать его более обобщенным c, потому что selectmenu - это общий компонент для моего приложения, который используется много раз. на разных страницах.

PS Имейте в виду, что проект намного сложнее, чем показанный фрагмент.

...