Исчезающие элементы при перемещении параметров между списками выбора

Question

У меня есть пользовательский интерфейс, где пользователь может перемещать несколько вариантов между двумя списками выбора. Здесь это выглядит так:

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

Проблема в том, что у меня есть функция сортировки, которая прибегает к опциям после того, как они были перемещены, и происходят действительно странные вещи. При первом перемещении опций слева направо все работает нормально. Если вы перемещаете другой элемент слева направо, он перезаписывает то, что уже есть. НО, если вы снова нажмете на левый список, элементы будут выглядеть как обычно! Если вы осмотрите дом, то увидите, что предметы там, нет никаких правил css, которые бы не отображали их, и не похоже, что дополнительные css применяются, когда они появляются снова. Код для перемещения элементов выглядит следующим образом:

$('#moveRight').click(function () {

  // Get all selection options
  var selectedOptions = $('#from option:selected');

  // Let's remove our items from the from list...
  $('#from option:selected').remove();

  // Add them to the to list...
  $('#to').append(selectedOptions);

  // Sort alphabetically
  $('#to option').sort(sortAlpha).appendTo('#to');
});

Я создал этот кодекс с рабочим примером интерфейса:

https://codepen.io/onekidney_/pen/YzyrYKX

Шаги для воспроизведения:

1. Выделите любое количество параметров в левом списке.
2. Нажмите кнопку "->".
3. Выделите любое количество опций в левом списке.
4. Нажмите кнопку «->».

Обратите внимание, что новые элементы являются единственными, которые отображаются в списке НО, если вы нажмете на левый список снова, они все появятся! Похоже, ошибка в сортировке, поскольку удаление, устраняющее эту проблему.

В этом вопросе была та же проблема, но, похоже, они исправили ее, удалив сортировку. Это новое поведение - это не было в эти годы go, когда этот код был развернут (вот почему jquery используется между прочим.) Я все еще хотел бы иметь возможность сортировки опций после их перемещения , У кого-нибудь есть представление о том, что здесь происходит?

Answer 1

Это похоже на ошибку рендеринга в браузере. Я не могу точно понять, почему это происходит, но похоже, что использование sort logi c после операций быстрого отсоединения / удаления / добавления приводит к путанице в браузере. Если вы посмотрите на инспектора DOM, то увидите, что элемент option находится в правильном месте, однако средство визуализации не отображает их.

Я бы посоветовал поднять это как ошибку у поставщиков браузеров.

Единственный обходной путь, который я нашел для этого, - это вызвать событие focus для цели select, чтобы заставить элемент перерисовываться в DOM. blur не является необходимым для этого исправления, это только для того, чтобы избежать выделения контура CSS вокруг выбранного элемента, что немного раздражает.

Также обратите внимание, что я генерировал логи c, используя data атрибуты на select элементах и ​​кнопках.

let els = {
  from: $('#from'),
  to: $('#to')
};

$('.move').click(function() {
  let $target = els[this.dataset.target];
  let $source = els[this.dataset.source];
  $source.children('option:selected').appendTo($target);
  $target.children('option').sort(sortAlpha).appendTo($target);
  $target.focus().blur();
});

let sortAlpha = (a, b) => parseInt(a.textContent, 10) > parseInt(b.textContent, 10) ? 1 : -1;

body {
  background-color: #a3d5d3;
}

select {
  width: 200px;
  height: 200px;
}

button {
  width: 100px;
  padding: 5px;
  margin: 0 5px 5px 5px;
}

#button-container {
  display: inline-block;
  vertical-align: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="from" multiple>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
</select>
<div id="button-container">
  <button class="move" id="moveRight" data-target="to" data-source="from">-&gt;</button><br />
  <button class="move" id="moveLeft" data-target="from" data-source="to">&lt;-</button>
</div>
<select id="to" multiple>
</select>