Components are duplicating themselves

[onkar-rentomojo]

Ref - vuejs/vue#3080

This issue is still not resolved. Components are getting duplicated when clicked on Accordion, even if we remove transition.

[LinusBorg]

How are we supposed to identify the problem from a UI screenshot?

[onkar-rentomojo]

We are using a custom accordion component in two projects. one is in vue2(Nuxt2) and another is in vue3(Nuxt3).

When user toggles the accordion the elements in the UI get duplicated as shown in above image. The issue is observed on OnePlus and Realme most.

Sharing the code for Vue2(Nuxt2) accordion -

<template>
  <div
    ref="rm-collapse__container"
    class="rm-collapse__container"
    :class="{ active: visibility }"
    @click="toggleAccordion"
  >
    <div
      class="rm-collapse__heading"
      :class="mobileSidebar ? 'rm-mobileSidebar' : ''"
    >
      <div>
        <slot name="header"></slot>
      </div>
      <div
        :class="[
          {
            'rm-collapse__dropdownOpen': visibility && !arrowDirection,
          },
          {
            'rm-collapse__dropdown': !visibility && !arrowDirection,
          },
        ]"
      >
        <img
          v-show="showArrow"
          class="rm-image"
          :class="{ [accordionIconClass]: arrowDirection }"
          src="@/assets/icons/right-arrow.svg"
          height="20"
        />
      </div>
    </div>
    <div class="rm-collapse__body">
      <slot name="body"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AccordionComponent',
  props: {
    showArrow: {
      type: Boolean,
      default: true,
    },
    backgroundclr: {
      type: String,
      default: '',
    },
    bottomPadding: {
      type: String,
      default: '15px',
    },
    arrowDirection: {
      type: String,
      default: null,
    },
    mobileSidebar: {
      type: Boolean,
      default: false,
    },
    isOpen: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visibility: false,
    };
  },
  computed: {
    accordionIconClass() {
      if (this.arrowDirection && this.arrowDirection === 'right') {
        if (!this.visibility) {
          return 'right-arrow';
        } else {
          return 'down-arrow';
        }
      } else if (this.arrowDirection && this.arrowDirection === 'left') {
        if (!this.visibility) {
          return 'left-arrow';
        } else {
          return 'down-arrow';
        }
      }
      return '';
    },
  },
  watch: {
    bottomPadding: {
      handler(value) {
        this.$nextTick(() => {
          const el = this.$refs['rm-collapse__container'];
          el.style.paddingBottom = `${value}`;
        });
      },
      immediate: true,
    },
    backgroundclr: {
      handler(value) {
        this.$nextTick(() => {
          const el = this.$refs['rm-collapse__container'];
          el.style.backgroundColor = `${value}`;
        });
      },
      immediate: true,
    },
    isOpen: {
      handler(val) {
        this.visibility = val;
      },
      immediate: true,
    },
  },
  methods: {
    start(el) {
      el.style.height = el.scrollHeight + 'px';
    },
    end(el) {
      el.style.height = '';
    },
    toggleAccordion() {
      this.visibility = !this.visibility;
    },
  },
};
</script>

<style lang="scss" scoped>
.rm-collapse__container {
  background-color: $white;
  border-radius: $t-marg__pad;
  padding: $t-marg__pad * 1.5;
  @media (min-width: 1101px) {
    background-color: $gray-elight;
  }
  .rm-collapse__heading {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    cursor: pointer;
    border-radius: $t-marg__pad;
    align-items: center;
    &.rm-mobileSidebar {
      background: $white;
      margin: -$t-marg__pad * 1.5;
      padding: $t-marg__pad * 1.5;
      height: 50px;
    }
    .rm-image {
      transform: rotate(90deg);
      &.right-arrow {
        transform: rotate(-90deg);
      }
      &.left-arrow {
        transform: rotate(90deg);
      }
      &.down-arrow {
        transform: rotate(0deg);
      }
    }
    .rm-collapse__dropdown {
      display: flex;
      width: 20px;
      justify-content: center;
    }
    .rm-collapse__dropdownOpen {
      display: flex;
      width: 20px;
      justify-content: center;
      transform: rotate(180deg);
    }
  }
  .rm-collapse__body {
    overflow: hidden;
    max-height: 0;
  }

  &.active .rm-collapse__body {
    max-height: 500px; /* Set a reasonable value or use max-height: none; */
  }
}

// .accordion-enter-active,
// .accordion-leave-active {
//   transition: height 0.3s ease;
//   overflow: hidden;
// }

// .accordion-enter,
// .accordion-leave-to {
//   height: 0 !important;
// }
</style>

<!--
  Passsing Value Example
  <AccordionVue backgroundclr="#a27b21">
    <template #header> Header </template>
    <template #body> Body </template>
  </AccordionVue>
-->

Vue3(Nuxt3) Accordion -

<script setup lang="ts">
const visibility = ref<boolean>(false);

const props = defineProps({
  activeBackgroundColor: { type: String, default: '#313131' },
  activeTextColor: { type: String, default: '#fff' },
  isOpen: { type: Boolean, default: false },
  shouldAllowPointerEvents: { type: Boolean, default: true },
  accordionBackgroundColor: { type: String, default: '#fff' },
  borderBottomColor: { type: String, default: '#313131' },
  borderBottomWidth: { type: String, default: '2px' },
});

const toggleAccordion = () => {
  if (!props.shouldAllowPointerEvents) return;
  visibility.value = !visibility.value;
};

const beforeEnter = (el: any) => {
  el.style.height = '0';
};

const enter = (el: any) => {
  el.style.height = el.scrollHeight + 'px';
};

const leave = (el: any) => {
  el.style.paddingTop = '0';
  el.style.paddingBottom = '0';
  el.style.height = '0';
};

watch(
  () => props.isOpen,
  (newVal) => {
    visibility.value = newVal;
  },
  { immediate: true },
);
</script>
<template>
  <div class="rm-accordion__container" :class="{ active: visibility }">
    <div
      class="rm-accordion__heading"
      :class="{ 'cursor-not-allowed': props.shouldAllowPointerEvents }"
      @click="toggleAccordion"
    >
      <slot name="header">Title</slot>
    </div>
    <transition
      name="accordion"
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
    >
      <div v-if="visibility">
        <slot name="body" />
      </div>
    </transition>
  </div>
</template>
<style lang="scss" scoped>
.rm-accordion__container {
  border-bottom: v-bind(borderBottomWidth) solid v-bind(borderBottomColor);
  background-color: v-bind(accordionBackgroundColor);
  color: $gray-900;
  &.active {
    background-color: v-bind(activeBackgroundColor);
    color: v-bind(activeTextColor);
  }
  &:last-child {
    border-bottom: 0;
  }
  .rm-accordion__heading {
    cursor: pointer;
    align-items: center;
    background-color: v-bind(accordionBackgroundColor);
  }
}

.accordion-enter-active,
.accordion-leave-active {
  transition: height 0.3s ease;
  overflow: hidden;
}

.accordion-enter,
.accordion-leave-to {
  height: 0 !important;
}
</style>

We tried removing transition too but it didnt help.