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

[ShemJM]

Describe the bug

`

Direct

` 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>