From b5f364c016ac8a9af1322fb363734ad7c5d84bf7 Mon Sep 17 00:00:00 2001
From: connoratrug <47183404+connoratrug@users.noreply.github.com>
Date: Thu, 21 Mar 2024 09:39:17 +0100
Subject: [PATCH] fix: floating vue hydration mismatch (#3526)

The VDropdown component from the floating-vue lib results in a hydration errors due to the way the lib edits the dom
issue is reported: https://github.com/Akryum/floating-vue/issues/1006

Workaround implemented as proposed in: https://github.com/Akryum/floating-vue/issues/1006#issuecomment-2007638042
---
 apps/nuxt3-ssr/components/BottomModal.vue                 | 2 ++
 apps/nuxt3-ssr/components/FilterWell.vue                  | 4 +++-
 apps/nuxt3-ssr/components/SideModal.vue                   | 2 ++
 .../harmonization/HarmonizationLegendDetailed.vue         | 8 +++++++-
 .../harmonization/HarmonizationLegendMatrix.vue           | 8 +++++++-
 5 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/apps/nuxt3-ssr/components/BottomModal.vue b/apps/nuxt3-ssr/components/BottomModal.vue
index 5845bfb502..410dbbcebf 100644
--- a/apps/nuxt3-ssr/components/BottomModal.vue
+++ b/apps/nuxt3-ssr/components/BottomModal.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const ariaId = useId();
 const preAnimation = () => {
   document.body.classList.add("v-popper_bottom");
 };
@@ -29,6 +30,7 @@ const emit = defineEmits(["close"]);
 
 <template>
   <VDropdown
+    :aria-id="ariaId"
     :shown="show"
     :positioning-disabled="true"
     @show="preAnimation()"
diff --git a/apps/nuxt3-ssr/components/FilterWell.vue b/apps/nuxt3-ssr/components/FilterWell.vue
index 65ad614a69..180a33cb5c 100644
--- a/apps/nuxt3-ssr/components/FilterWell.vue
+++ b/apps/nuxt3-ssr/components/FilterWell.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const ariaId = useId();
 const props = defineProps<{
   filters: [];
 }>();
@@ -51,7 +52,7 @@ function isAFilterSet(filters) {
       Active filters
     </div>
     <div class="flex flex-wrap gap-3 content-around p-3">
-      <template v-for="filter in filters">
+      <template v-for="(filter, index) in filters">
         <Button
           v-if="filter?.columnType === '_SEARCH' && isFilterSet(filter)"
           @click="clearSearch(filter)"
@@ -64,6 +65,7 @@ function isAFilterSet(filters) {
         </Button>
 
         <VDropdown
+          :aria-id="ariaId + '_' + index"
           :triggers="['hover', 'focus']"
           :distance="12"
           theme="tooltip"
diff --git a/apps/nuxt3-ssr/components/SideModal.vue b/apps/nuxt3-ssr/components/SideModal.vue
index ed2f94b842..0c89c22aca 100644
--- a/apps/nuxt3-ssr/components/SideModal.vue
+++ b/apps/nuxt3-ssr/components/SideModal.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { INotificationType } from "~/interfaces/types";
+const ariaId = useId();
 const props = withDefaults(
   defineProps<{
     slideInRight?: boolean;
@@ -81,6 +82,7 @@ const bgClass = computed(() => {
 
 <template>
   <VDropdown
+    :aria-id="ariaId"
     :shown="show"
     :positioning-disabled="true"
     @show="preAnimation()"
diff --git a/apps/nuxt3-ssr/components/harmonization/HarmonizationLegendDetailed.vue b/apps/nuxt3-ssr/components/harmonization/HarmonizationLegendDetailed.vue
index e480900f28..96b991f917 100644
--- a/apps/nuxt3-ssr/components/harmonization/HarmonizationLegendDetailed.vue
+++ b/apps/nuxt3-ssr/components/harmonization/HarmonizationLegendDetailed.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { HarmonizationIconSize } from "../../interfaces/types";
+const ariaId = useId();
 
 const props = withDefaults(
   defineProps<{
@@ -28,7 +29,12 @@ const props = withDefaults(
         No data
       </li>
     </ul>
-    <VDropdown :triggers="['hover', 'focus']" :distance="12" theme="tooltip">
+    <VDropdown
+      :aria-id="ariaId"
+      :triggers="['hover', 'focus']"
+      :distance="12"
+      theme="tooltip"
+    >
       <div class="flex gap-1 text-blue-500 hover:underline cursor-pointer">
         <BaseIcon name="info" />
         <span> About statuses </span>
diff --git a/apps/nuxt3-ssr/components/harmonization/HarmonizationLegendMatrix.vue b/apps/nuxt3-ssr/components/harmonization/HarmonizationLegendMatrix.vue
index 9927c808a3..d744b8e8f8 100644
--- a/apps/nuxt3-ssr/components/harmonization/HarmonizationLegendMatrix.vue
+++ b/apps/nuxt3-ssr/components/harmonization/HarmonizationLegendMatrix.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { HarmonizationIconSize } from "../../interfaces/types";
+const ariaId = useId();
 
 const props = withDefaults(
   defineProps<{
@@ -24,7 +25,12 @@ const props = withDefaults(
         No data
       </li>
     </ul>
-    <VDropdown :triggers="['hover', 'focus']" :distance="12" theme="tooltip">
+    <VDropdown
+      :aria-id="ariaId"
+      :triggers="['hover', 'focus']"
+      :distance="12"
+      theme="tooltip"
+    >
       <div class="flex gap-1 text-blue-500 hover:underline cursor-pointer">
         <BaseIcon name="info" />
         <span> About statuses </span>