deactivate pointer events on outer div

jplag · Apr 18, 2024 · 876cfaa · 876cfaa
1 parent 89a7662
commit 876cfaa
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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)