Closed rickngo closed 3 weeks ago
After looking at StepPanel.vue, I think this stems from the use of v-if
rather than v-show
in the <template v-else>
block:
<template v-else>
<template v-if="!asChild">
<component v-if="active" :is="as" :id="id" :class="cx('root')" role="tabpanel" :aria-controls="ariaControls" v-bind="getPTOptions('root')">
should be:
<template v-else>
<template v-if="!asChild">
<component v-show="active" :is="as" :id="id" :class="cx('root')" role="tabpanel" :aria-controls="ariaControls" v-bind="getPTOptions('root')">
I tested using a Vertical Stepper (which does have v-show) and everything works as expected
Describe the bug
When using the Stepper component and its associated components (StepPanels, etc.), nested components are being re-mounted when navigating steps.
Possibly, each StepPanel is being re-mounted even for non-nested components, but since the ref variable is located in the parent component, then it appears like it is not being re-mounted.
Reproducer
https://stackblitz.com/edit/primevue-4-vite-issue-template-nxw9yy?file=src%2FApp.vue
PrimeVue version
4.0.0
Vue version
3.x
Language
TypeScript
Build / Runtime
Vue CLI App
Browser(s)
Chrome, Safari
Steps to reproduce the behavior
See StackBlitz.
Essentially, create a component and then nest it in the StepPanel. When navigating steps, the component is being re-mounted/re-rendered.
Expected behavior
Ideally, StepPanels should only show/hide the nested components as otherwise, all form information could possibly be lost.