Проблема с .append (), списками выбора и Chrome 81

Question

Начиная с версии Chrome 81 извлечение параметров из списка выбора и их повторное добавление с помощью .append() не работает должным образом. Такое поведение работало в Chrome 80 и продолжает работать в других браузерах. Я делаю что-то не так или это ошибка в Chrome?

Примеры шагов кода

• получить список выбора
• получить параметры из него (в рабочем коде я ими манипулирую, но для этого примера это не так)
• удалить параметры из списка
• повторно добавить параметры в список

Ожидаемое поведение

список имеет опции

Фактическое поведение

опции не показаны, хотя DOM Инспектор показывает, что они присутствуют

Фрагмент

function test() {
   var selectItem = $("#selectOne");
   var items = selectItem.find('option');
   selectItem.empty();
   selectItem.append(items);  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectOne" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>

<br/>

<button onclick="test()">Go</button>

Добавление следующей строки в конец моего javascript действительно "решает" проблему:

selectItem.get(0).innerHTML = selectItem.get(0).innerHTML;

Однако это явно не фактическое исправление. Я включаю его здесь только в том случае, если оно помогает кому-то, кто понимает это больше, чем я, точно определить проблему.

РЕДАКТИРОВАТЬ 21 апреля: https://bugs.chromium.org/p/chromium/issues/detail?id=1073172 (спасибо тому, кто это открыл!)

Answer 1

Клонируйте ваши option, сделав так, что он снова отобразит опции,

это единственная строка, которую вам нужно изменить

var items = selectItem.find('option');

на эту

var items = selectItem.find('option').clone();

function test() {
   var selectItem = $("#selectOne");
   var items = selectItem.find('option').clone();
   selectItem.empty();
   selectItem.append(items);  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectOne" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>

<br/>

<button onclick="test()">Go</button>