oruga Infinite recursive update freezing the browser when updating asynchronously a TagInput model value

Infinite recursive update freezing the browser when updating asynchronously a TagInput model value

Open sylvainpolletvillard opened this issue 2 months ago • 2 comments

Overview of the problem

Oruga version: [0.8.8] Vuejs version: [3.4.21] OS/Browser: latest Chrome, Windows 10

Description

Updating the model value of a TagInput after its creation cause an infinite loop of recursive Vue updates

Steps to reproduce

<script setup lang="ts">
import { ref } from "vue";

const tags = ref([{ type: "shirt", color: "red" }]);

const data = [
  { type: "shirt", color: "red" },
  { type: "pants", color: "blue" },
  { type: "shoes", color: "green" },
];

setTimeout(() => {
  tags.value = [{ type: "pants", color: "blue" }]; // <--- this cause the infinite recursion and freeze the browser in production Vue
});
</script>

<template>
  <main>
    <o-field label="Add some items">
      <o-taginput
        v-model="tags"
        :data="data"
        allow-autocomplete
        field="type"
        icon="tag"
        placeholder="Add an item"
        aria-close-label="Delete this item"
      />
    </o-field>

    <p><b>Items:</b> {{ tags }}</p>
  </main>
</template>