From 876cfaaaca25747b05ebd66ddb3f983ba4a8f1e4 Mon Sep 17 00:00:00 2001
From: Alex | Kronox <alexander_vogt@outlook.de>
Date: Thu, 18 Apr 2024 21:34:53 +0200
Subject: [PATCH] deactivate pointer events on outer div

---
 report-viewer/src/components/ToolTipComponent.vue | 6 +++---
 report-viewer/tests/e2e/Comparison.spec.ts        | 2 +-
 report-viewer/tests/e2e/Distribution.spec.ts      | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/report-viewer/src/components/ToolTipComponent.vue b/report-viewer/src/components/ToolTipComponent.vue
index b6770faa8..8efbb2f2b 100644
--- a/report-viewer/src/components/ToolTipComponent.vue
+++ b/report-viewer/src/components/ToolTipComponent.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="group inline">
-    <div ref="contentRef"><slot></slot></div>
+  <div class="group pointer-events-none inline">
+    <div ref="contentRef" class="pointer-events-auto"><slot></slot></div>
     <span
       class="invisible absolute box-border delay-0 group-hover:visible group-hover:delay-200"
       ref="tooltipRef"
       v-if="$slots.tooltip"
     >
       <span
-        class="arrowBase relative z-10 block rounded-md bg-tooltip px-1 text-center text-white after:absolute after:border-4 after:border-solid after:border-transparent"
+        class="arrowBase pointer-events-auto relative z-10 block rounded-md bg-tooltip px-1 text-center text-white after:absolute after:border-4 after:border-solid after:border-transparent"
         :style="tooltipPosition"
         :class="{
           'after:top-1/2 after:-mt-1': props.direction == 'left' || props.direction == 'right',
diff --git a/report-viewer/tests/e2e/Comparison.spec.ts b/report-viewer/tests/e2e/Comparison.spec.ts
index 6c08be933..f2e6d742b 100644
--- a/report-viewer/tests/e2e/Comparison.spec.ts
+++ b/report-viewer/tests/e2e/Comparison.spec.ts
@@ -15,7 +15,7 @@ test('Test comparison table and comparsion view', async ({ page }) => {
   const comparisonTableAverageSorted = await page.getByText(/Cluster[0-9]/).textContent()
   expect(comparisonTableAverageSorted).toContain('100Purple FishBeige Dog')
 
-  await comparisonContainer.getByText('Maximum Similarity', { exact: true }).click({ force: true })
+  await comparisonContainer.getByText('Maximum Similarity', { exact: true }).click()
   // check for elements in maximum similarity table
   await page.getByPlaceholder('Filter/Unhide Comparisons').fill('Blue')
   const comparisonTableMaxSorted = await page.getByText(/Cluster[0-9]/).textContent()
diff --git a/report-viewer/tests/e2e/Distribution.spec.ts b/report-viewer/tests/e2e/Distribution.spec.ts
index 3a952e1ff..2c67614aa 100644
--- a/report-viewer/tests/e2e/Distribution.spec.ts
+++ b/report-viewer/tests/e2e/Distribution.spec.ts
@@ -26,7 +26,7 @@ test('Test distribution diagram', async ({ page }) => {
 async function selectOptions(page: Page, options: string[]) {
   const distributionDiagramContainer = page.getByText('Distribution of Comparisons:Options:')
   for (const option of options) {
-    await distributionDiagramContainer.getByText(option, { exact: true }).click({ force: true })
+    await distributionDiagramContainer.getByText(option, { exact: true }).click()
   }
   // This timeout is so that the screenshot is taken after the animation is finished
   await page.waitForTimeout(3000)