antoniandre / wave-ui

A UI framework for Vue.js (2 & 3) with only the bright side. ☀️
https://antoniandre.github.io/wave-ui
MIT License
540 stars 37 forks source link

[w-accordion] unexpected close while updating elements #140

Open alessandrodipierro opened 5 months ago

alessandrodipierro commented 5 months ago

If while using the W-Accordion component you update a property of the elements over which the component is looping, the automatic closing of the elements is triggered. Is it wanted?

Here the example snippet:

<script setup lang="ts">
import { getSchedule } from '@/api/scheduleService'
import { ref, watch } from 'vue'

interface Props {
  scheduleId: string;
}

const props = defineProps<Props>()
const { schedule } = await getSchedule(props.scheduleId)

const updateProperty = <T, K extends keyof T>(obj: T, key: K, value: T[K]) => {
  obj[key] = value
}

</script>

<template>
  <w-card shadow class="mx10 mb3 mt4">
    <w-accordion :items="schedule.guests"  expand-icon="wi-plus" collapse-icon="wi-minus" expand-single>
      <template #item-content="{ item }">
        <w-input type="text" label="Firstname" :model-value="item.firstname"
                 @update:model-value="value => updateProperty(item, 'firstname', value)" />
      </template>
    </w-accordion>
  </w-card>

</template>

<style scoped>

</style>
DerrikMilligan commented 1 month ago

Is schedule a Ref type? That part of your code isn't shown. Can you make a minimal reproduction in Codepen or something similar to better demonstrate the problem?