Есть ли информация бага дублирования select при динамическом изменении options в Firefox?

Question

[E-Timofet]

Всем привет! Не подскажите есть ли где-то информация по такой проблеме:
- android
- браузер Firefox
При динамическом изменении options у select, происходит дублирование "модалки" options

p.s. спасает "v-memo", но не могу найти инфу по этому багу

<script setup>
import { ref } from 'vue'
const optionsDefault = ['value 1', 'value 2', 'value 3']

const activeSelect = ref('value 1')
const options = ref(optionsDefault)
const updateCount = ref(0)

const updateOptions = () => {
  setInterval(() => {
    options.value = optionsDefault;
    updateCount.value ++;
  }, 3000)
}
</script>

<template>
  <h2>update cnt: {{updateCount}}</h2>
  <div>active value: {{activeSelect}}</div>
  <select
  v-model="activeSelect"
>
    <option
      v-for="option in options"
      :key="option"
      :value="option"
    >
    {{ option }}
    </option>
  </select>

  <hr>
  <div>
    <button @click="updateOptions">start updating</button>
  </div>
</template>

код: https://stackblitz.com/edit/vitejs-vite-mpva77aj?f...
демо: https://youtube.com/shorts/ktiLCX138YQ?feature=share

Comments

[VoidVolker]

E-Timofet и на каком этапе отладки у вас возникли сложности? Что именно не получается? И будьте любезны сделать стандартную работающую песочницу, где этот баг воспроизводится. На блице всё падает с ошибкой, а из видео не очень понятно, что именно происходит и где именно баг.

[E-Timofet]

VoidVolker, там проблема в дублировании в мобильной версии. То есть с каждым обновлением данных, появляется новое "модальное окно" которое накладывается на текущее.
Хм, странно, сейчас открыл ссылку с блицем- запустилось

[VoidVolker]

E-Timofet,

dependencies:
+ @rolldown/binding-wasm32-wasi 1.2.3

Error: Cannot find native binding. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try `npm i` again after removing both package-lock.json and node_modules directory.
    at <anonymous> (file:///home/projects/vitejs-vite-mpva77aj/node_modules/rolldown/dist/shared/binding-CKyeQZen.mjs:613:34)
    at <anonymous> (file:///home/projects/vitejs-vite-mpva77aj/node_modules/rolldown/dist/shared/binding-CKyeQZen.mjs:25:49)
    at <anonymous> (file:///home/projects/vitejs-vite-mpva77aj/node_modules/rolldown/dist/shared/parse-CWXBoSKb.mjs:19:84)
    at run (node:internal/modules/esm/module_job:170:4963)

[E-Timofet]

VoidVolker, хм, интересно. Спасибо, что подсветили, поправил вопрос добавил код

<script setup>
import { ref } from 'vue'
const optionsDefault = ['value 1', 'value 2', 'value 3']

const activeSelect = ref('value 1')
const options = ref(optionsDefault)
const updateCount = ref(0)

const updateOptions = () => {
  setInterval(() => {
    options.value = optionsDefault;
    updateCount.value ++;
  }, 3000)
}
</script>

<template>
  <h2>update cnt: {{updateCount}}</h2>
  <div>active value: {{activeSelect}}</div>
  <select
  v-model="activeSelect"
>
    <option
      v-for="option in options"
      :key="option"
      :value="option"
    >
    {{ option }}
    </option>
  </select>

  <hr>
  <div>
    <button @click="updateOptions">start updating</button>
  </div>
</template>

Answer 1

[Aetae]

Это однозначно баг Фокса, без Vue его легко можно повторить так:

<select>
  <option value="value 1">value 1</option>
  <option value="value 2">value 2</option>
  <option value="value 3">value 3</option>
</select>
<script>
  const option = document.querySelector('option');
  const value = option.value;

  setInterval(() => {
    option.setAttribute('value', value)
  }, 1000);
</script>

Даже на PC раскрытый select будет "мигать".

А вот чтоб понять почему такое происходит в Vue хотя ничего не меняется, а следовательно не должно ререндериться пришлось чуть покопать: оказывается у Vue специальная обработка свойства value (ещё checked и selected) - для них он агрессивно проставляет атрибут при каждом рендере, даже если ничего не изменилось.

Со стороны Vue можно заменить :value на :value.prop или вообще убрать :value (тогда тест option будет считаться за него).
Но в идеале надо завести баг на Фокс.

Comments

[E-Timofet]

Спасибо, завел баг https://bugzilla.mozilla.org/show_bug.cgi?id=2062910

Answer 2

[Пума Тайланд]

похоже на регрессию/гонку вокруг механизма из бага Mozilla 1758800 (GeckoView): native select-prompt в Firefox Android при изменении детей select закрывает и переоткрывает окно, переоткрытие иногда накладывается на старое (баг закрыт в Firefox 102, похоже не до конца). Ре-рендер у тебя идёт из-за updateCount, options.value присваивается той же ссылкой, это no-op для ref. Проверь: убери options.value = optionsDefault, оставь только updateCount++, если дубли останутся — дело не в options. Пропадут, повесь MutationObserver(childList) на select, глянь стреляет ли он на ре-рендере. Стреляет, заводи баг Mozilla со ссылкой на 1758800.

Comments

[Антон Антон]

повесь MutationObserver(childList) на select, глянь стреляет ли он на ре-рендере. Стреляет, заводи баг Mozilla со ссылкой на 1758800.

разве vue не должен ререндерить только h2 в таком случае? в таком случае можно и в vue баг завести

[Пума Тайланд]

Fragster, тут скорее так: рендер-функция у Vue пересчитывается вся, но патчится по diff'у, реально трогает только h2. Если MutationObserver на select молчит — Vue тут ни при чём, дело чисто в GeckoView.

[Aetae]

Антон Антон, расписал в ответе почему так.

[Пума Тайланд]

Aetae, принимается, ты прав — Vue правда лезет в select из-за спецобработки value/checked/selected, моя версия про чистый дифф была неточной.