Subscribe on changes!

Rendering Glitches in <select> Component Options in Firefox When Using Objects as Values

avatar
Feb 22nd 2024

Vue version

3.4.19

Link to minimal reproduction

https://play.vuejs.org/#eNp9U8GO0zAQ/ZWRL+lquwlluVDSSgv0UA6AttwwQm0yLd5N7Mh2QlGUf2dsp2nKshspkj3vzfjNG7tld1UVNzWyOUtNpkVlwaCtqyWXoqyUttCCxj10sNeqhIioEZdcZkoaC7VB/aWygjawcLzJdy6BUkQ+h2gWTUGrAml5l5dCRtBNR/DrM7zKhVX6H/z2jG/qnRO3Q8fh8sfVu7MGgwVmFvOgo5fxvAKXGhKFtKibbdGnvHII9b7uw5PJFSyW0DpFJ2pMf43X18TspjALMtIkGEeW0cZiWRVbi7QDcH9aLVuSczqs69LEucutB4N6aG5KlWOx4OyyHc58HfelKjTY3OyVJmK/FXI8Bc5g/oh/BjgWuQt52UNwVJTMbqGnOqNI3nBeEuI9l7r0ynyXPpCLZqiz6VXD+uPclbzsglRQYUh3GpKnKfd+QE+TLvSkSTguTQaD2ZRZQ6Pci0P8YJSkK+yHxVmmykoUI1OofCjD2bYo1O9PPmZ1jf7C+ZxfmD3+J/5gji7G2VeN5HODnA2Y3eoD2gCvNp/xSOsBpIHWBbFfAO/RqKIOI3G097XMSfaI59Wu/UMU8vDNrI4WpTk15YQ6Zng2nNHj/PBC62e5t/Ebn0fXmFz82aB2NclAAuLZW9b9BfSbVgo=

Steps to reproduce

  1. Utilize a component incorporating a <select> element, with each <option> explicitly bound to an object using the :value="option" attribute.
  2. Trigger DOM updates at short intervals using setInterval, causing frequent re-rendering.
  3. Open the dropdown of the <select> component in Firefox to observe rendering issues.

What is expected?

The options within the dropdown should render without any glitches, allowing for the selection of an option.

What is actually happening?

The dropdown options glitch, showing intermittent rendering, making it impossible to select any option.

System Info

No response

Any additional comments?

This issue has been observed in Firefox version 123.0 (64-bit)

avatar
Feb 23rd 2024
+ v-memo="[selectedOption]"
<select v-model="selectedOption" v-memo="[selectedOption]">
avatar
Feb 23rd 2024

@Shyam-Chen , Thank you for your reply. With v-memo it works as expected, I will proceed to close the issue, thank you very much.