Combining <datalist> with <option :value="..."> breaks data selection

[spiffytech]

I'm trying to use a datalist with Vue, on a component that will rerender while the user is filling out the form.

If build my datalist with <option :value="...">, then when I try to select an item from the dropdown, the selection is cancelled the next time the component renders. The datalist works properly if I use naked <option> elements, without :value, but then of course I have to use the display text as my value.

Am I doing something wrong here?

Screencast.from.2024-10-16.10-04-14.mp4

<script setup>
import { ref } from 'vue'

const values = ref(['foo', 'bar', 'baz']);

const clock = ref(new Date().toISOString());
setInterval(() => clock.value = new Date().toISOString(), 250)
</script>

<template>
  <p>The time is: {{clock}}</p>
  <input list="my-datalist" />
  <datalist id="my-datalist">
    <option v-for="value in values" :value="value">{{value}}</option>
    </datalist>
</template>

Playground

[edison1105]

use v-memo

<datalist id="my-datalist" v-memo="[values]">
  <option v-for="value in values" :value="value">{{value}}</option>
</datalist>

[spiffytech]

Great, that worked!

The v-memo docs indicate it's usually a performance tool:

v-memo is provided solely for micro optimizations in performance-critical scenarios and should be rarely needed. ... v-memo can also be used on components to manually prevent unwanted updates in certain edge cases where the child component update check has been de-optimized.

Could you help me understand why it's necessary for correctness here? If the items in the values array haven't changed, what is Vue doing to the <datalist> and <option> on each render?

[edison1105]

Although the values did not change, if the option contains dynamic props, each time the component is rendered, the option will assign the value attribute to option (option[value]=value). This may cause the datalist to be reprint. After removing :value, the DOM operation is not triggered during the patch.