From db082efdcfa6fda3863a344f884cd05848bac97d Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Wed, 29 May 2024 11:22:43 +0200
Subject: [PATCH] fix: handle dynamic content in empathize (#1492)

---
 .../x-modules/empathize/test-empathize.vue    | 28 ++++++++++++++-----
 .../empathize/components/empathize.vue        |  5 ++--
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/packages/_vue3-migration-test/src/x-modules/empathize/test-empathize.vue b/packages/_vue3-migration-test/src/x-modules/empathize/test-empathize.vue
index 93c2b1fbde..0b9530285b 100644
--- a/packages/_vue3-migration-test/src/x-modules/empathize/test-empathize.vue
+++ b/packages/_vue3-migration-test/src/x-modules/empathize/test-empathize.vue
@@ -1,25 +1,39 @@
 <template>
   <SearchInput />
   <Empathize :animation="CollapseHeight" class="empathize">
-    <h1>It is a Empathize</h1>
-    <h2>It is a Empathize</h2>
-    <h3>It is a Empathize</h3>
-    <p>
-      Component containing the empathize. It has a required slot to define its content and two props
-      to define when to open and close it: `eventsToOpenEmpathize` and `eventsToCloseEmpathize`.
-    </p>
+    <div v-if="showContent">
+      <h1>It is a Empathize</h1>
+      <h2>It is a Empathize</h2>
+      <h3>It is a Empathize</h3>
+      <p>
+        Component containing the empathize. It has a required slot to define its content and two
+        props to define when to open and close it: `eventsToOpenEmpathize` and
+        `eventsToCloseEmpathize`.
+      </p>
+    </div>
   </Empathize>
   <Empathize :animation="CollapseHeight" class="empathize" />
+  <button @click="toggleContent">
+    {{ showContent ? 'hide empathize content' : 'show empathize content' }}
+  </button>
 </template>
 
 <script setup lang="ts">
+  import { ref } from 'vue';
   import CollapseHeight from '../../../../x-components/src/components/animations/collapse-height.vue';
   import Empathize from '../../../../x-components/src/x-modules/empathize/components/empathize.vue';
   import SearchInput from '../../../../x-components/src/x-modules/search-box/components/search-input.vue';
+
+  const showContent = ref(true);
+  const toggleContent = () => {
+    showContent.value = !showContent.value;
+  };
 </script>
 
 <style scoped>
   .empathize {
     border: 3px solid red;
+    padding-top: 16px;
+    padding-bottom: 16px;
   }
 </style>
diff --git a/packages/x-components/src/x-modules/empathize/components/empathize.vue b/packages/x-components/src/x-modules/empathize/components/empathize.vue
index b727beaf12..96c205ed40 100644
--- a/packages/x-components/src/x-modules/empathize/components/empathize.vue
+++ b/packages/x-components/src/x-modules/empathize/components/empathize.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-  import { computed, defineComponent, PropType, ref } from 'vue';
+  import { defineComponent, PropType, ref } from 'vue';
   import { NoElement } from '../../../components/no-element';
   import { useDebounce } from '../../../composables/use-debounce';
   import { useRegisterXModule } from '../../../composables/use-register-x-module';
@@ -64,7 +64,7 @@
       const empathizeRef = ref<HTMLDivElement>();
 
       const isOpen = ref(false);
-      const hasContent = computed(() => !!empathizeRef.value?.children.length);
+      const hasContent = ref(!!empathizeRef.value?.children.length);
 
       /**
        * Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpen`
@@ -87,6 +87,7 @@
        * element.
        */
       function open() {
+        hasContent.value = !!empathizeRef.value?.children.length;
         if (hasContent.value) {
           changeOpen(true);
         }