AccordionTab: Focus lost when editing a field that the AccordionTab header is bound to.

[ShemJM]

Describe the bug

<Accordion> <AccordionTab v-for="cause in causes" :header="cause.direct"> <div> <p>Direct</p> <InputText v-model="cause.direct" class="cause-text-field" /> </div> <AccordionTab> </Accordion>

So when I type in that InputText field, it loses focus every key press. I think because the same value is used in the header, as when I remove that it works fine.

Is this a bug or should I setup my code another way?

Reproducer

https://codesandbox.io/s/primevue-create-vue-issue-template-kw9g6i

PrimeVue version

3.21.0"

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[tugcekucukoglu]

Cannot replicate. You may use https://codesandbox.io/s/primevue-create-vue-issue-template-kw9g6i this link to create a demo.

[github-actions[bot]]

We're unable to replicate your issue, if you are able to create a reproducer or add details please edit this issue. This issue will be closed if no activities in 20 days.

[ShemJM]

The codesandbox app doesn't work very well for me, but the general idea is if you have a header for an accordion tab bound to a property

<script setup>
import Accordion from "primevue/accordion";
import AccordionTab from "primevue/accordiontab";
import { computed, reactive, ref, watch, onMounted } from "vue";
const header = ref("");
</script>

<template>
    <Accordion :activeIndex="0">
      <AccordionTab :header="header">
        <input v-model="header" />
      </AccordionTab>
    </Accordion>
</template>

then when you edit that in the input element, it will lose focus.

[Swarlston]

Had the same problem. The issue is that the header-prop is also used as the :key for the accordion tab. However there's a fallback for the :key to the index, in case that you don't specify the :header-prop.

A work around is specifying the header via a named slot.

<script setup>
import Accordion from "primevue/accordion";
import AccordionTab from "primevue/accordiontab";
import { computed, reactive, ref, watch, onMounted } from "vue";
const header = ref("");
</script>

<template>
    <Accordion :activeIndex="0">
      <AccordionTab>
        <template #header>{{header}}</template>
        <input v-model="header" />
      </AccordionTab>
    </Accordion>
</template>