Taginput with autocomplete does not work if data is an array of objects

[sylvainpolletvillard]

Overview of the problem

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

Description

A tagInput with autocomplete and data being an array of objects does not add tags when selecting a proposition.

Steps to reproduce

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

const tags = ref([]);

const data = [
  { type: "shirt", color: "red" },
  { type: "pants", color: "blue" },
  { type: "shoes", color: "green" },
];
</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>

Expected behavior

When clicking on a proposition in autocomplete, the added tag contains the object and is displayed with the "field" property

Actual behavior

When clicking on a proposition in autocomplete, no tag is added

chrome_tls0XrnQ5k.mp4

[theonelucas]

I believe this bug extends beyond the o-taginput, I have a component that is an o-input with an o-dropdown with multiple="true", and I have the same issue of clicking on a dropdown item and having no effect, but with a caveat: It only breaks after filtering the list, so If I open the dropdown and click on an item, it gets selected, but If I filter the dropdown options list and then click on a filtered item, the item doesn't get selected, and no event from the o-dropdown is fired.

This might indicate that Oruga is having trouble detecting changes in the list of dropdown items after mount.

[mlmoravek]

Yes, it could be. O-Taginput is based on O-Autocomplete, which is based on O-Dropdown.

I will have a closer look when I have some time.