fix(core/event-list): event-list-items not selectabe in chrome (#1230)

Co-authored-by: Daniel Leroux <[email protected]>
siemens · May 7, 2024 · 5b2df0c · 5b2df0c
1 parent 5eea8d1
commit 5b2df0c
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 86 deletions.
diff --git a/.changeset/large-oranges-float.md b/.changeset/large-oranges-float.md
@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/event-list): event-list-items not selectabe in chrome
diff --git a/packages/core/playwright-ct.config.ts b/packages/core/playwright-ct.config.ts
@@ -28,6 +28,7 @@ const config: PlaywrightTestConfig = {
       },
     },
   ],
+  retries: 2,
 };
 
 export default config;
diff --git a/packages/core/src/components/event-list/event-list.tsx b/packages/core/src/components/event-list/event-list.tsx
@@ -10,6 +10,7 @@
 import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';
 import { createMutationObserver } from '../utils/mutation-observer';
 import { convertToRemString } from '../utils/rwd.util';
+import anime from 'animejs';
 
 @Component({
   tag: 'ix-event-list',
@@ -102,22 +103,25 @@ export class EventList {
     item.style.setProperty('--event-list-item-height', height);
   }
 
-  private triggerFadeOut(): Promise<any> {
-    if (!this.animated) {
-      return Promise.resolve();
-    }
+  private triggerFadeOut(): Promise<void> {
+    return new Promise((resolve) => {
+      if (!this.animated) {
+        resolve();
+      }
 
-    const keyframes = [
-      {
-        opacity: 1,
-        easing: 'ease-in',
-      },
-      { opacity: 0 },
-    ];
-    const listElement = this.hostElement.shadowRoot.querySelector('ul');
-    return listElement.animate(keyframes, {
-      duration: EventList.fadeOutDuration,
-    }).finished;
+      const keyframes = [{ opacity: 1, easing: 'easeInSine' }, { opacity: 0 }];
+
+      const listElement = this.hostElement.shadowRoot.querySelector('ul');
+
+      anime({
+        targets: listElement,
+        opacity: keyframes,
+        duration: EventList.fadeOutDuration,
+        complete: () => {
+          resolve();
+        },
+      });
+    });
   }
 
   private triggerFadeIn() {
@@ -129,16 +133,15 @@ export class EventList {
     listItems.forEach((e, i) => {
       const delay = i * 80;
       const offset = delay / (delay + EventList.fadeInDuration);
-      const keyframes = [
-        { opacity: 0 },
-        { opacity: 0, easing: 'ease-out', offset },
-        { opacity: 1 },
-      ];
-      const options = {
+      anime({
+        targets: e,
+        offset: offset,
         duration: EventList.fadeInDuration + delay,
-        iterations: 1,
-      };
-      e.animate(keyframes, options);
+        opacity: [0, 1],
+        easing: 'easeInOutSine',
+        delay: delay,
+        autoplay: true,
+      });
     });
   }
 

diff --git a/packages/core/src/components/event-list/test/event-list.ct.ts b/packages/core/src/components/event-list/test/event-list.ct.ts
@@ -0,0 +1,70 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import 'jest';
+import { test } from '@utils/test';
+import { expect } from '@playwright/test';
+
+test('renders', async ({ mount, page }) => {
+  await mount(`
+    <ix-event-list>
+      <ix-event-list-item color="color-primary">Text 1</ix-event-list-item>
+      <ix-event-list-item color="color-primary">Text 2</ix-event-list-item>
+      <ix-event-list-item color="color-primary">Text 3</ix-event-list-item>
+      <ix-event-list-item color="color-primary">Text 4</ix-event-list-item>
+    </ix-event-list>
+  `);
+
+  const eventList = page.locator('ix-event-list');
+  await expect(eventList).toHaveClass(/hydrated/);
+});
+
+test('check if items still clickable', async ({ mount, page }) => {
+  await mount(`
+    <ix-event-list>
+      <ix-event-list-item color="color-primary" selected>Text 1</ix-event-list-item>
+      <ix-event-list-item color="color-primary">Text 2</ix-event-list-item>
+      <ix-event-list-item color="color-primary">Text 3</ix-event-list-item>
+      <ix-event-list-item color="color-primary">Text 4</ix-event-list-item>
+    </ix-event-list>
+  `);
+
+  await page.waitForTimeout(500);
+  const firstEventListItem = page.locator('ix-event-list-item').first();
+  const secondEventListItem = page.locator('ix-event-list-item').nth(1);
+  const thirdEventListItem = page.locator('ix-event-list-item').last();
+
+  const clickCountHandle = await page.evaluateHandle(() => {
+    return { count: 0 };
+  });
+
+  await firstEventListItem.evaluate((eventListItem, clickCountHandle) => {
+    eventListItem.addEventListener('click', () => {
+      clickCountHandle.count++;
+    });
+  }, clickCountHandle);
+
+  await firstEventListItem.click();
+  await secondEventListItem.click();
+  await thirdEventListItem.click();
+
+  //Check if still clickable
+  await firstEventListItem.click();
+  expect((await clickCountHandle.jsonValue()).count).toBe(2);
+
+  clickCountHandle.dispose();
+});
diff --git a/packages/core/src/components/event-list/test/event-list.spec.tsx b/packages/core/src/components/event-list/test/event-list.spec.tsx
@@ -72,66 +72,4 @@ describe('event-list', () => {
       </ix-event-list>
     `);
   });
-
-  it('animated', async () => {
-    const page = await newSpecPage({
-      components: [EventList],
-      html: '<div></div>',
-    });
-
-    const eventList = page.doc.createElement('ix-event-list');
-    const eventListItem = page.doc.createElement('ix-event-list-item');
-
-    eventListItem.animate = jest.fn();
-
-    eventList.appendChild(eventListItem);
-    page.root.appendChild(eventList);
-
-    await page.waitForChanges();
-
-    expect(eventListItem.animate).toHaveBeenCalled();
-
-    expect(page.root).toEqualHtml(`
-      <ix-event-list class="item-size-s">
-        <mock:shadow-root>
-          <ul>
-            <slot></slot>
-          </ul>
-        </mock:shadow-root>
-        <ix-event-list-item></ix-event-list-item>
-      </ix-event-list>
-    `);
-  });
-
-  it('not animated', async () => {
-    const page = await newSpecPage({
-      components: [EventList],
-      html: '<div></div>',
-    });
-
-    const eventList = page.doc.createElement('ix-event-list');
-    eventList.animated = false;
-
-    const eventListItem = page.doc.createElement('ix-event-list-item');
-
-    eventListItem.animate = jest.fn();
-
-    eventList.appendChild(eventListItem);
-    page.root.appendChild(eventList);
-
-    await page.waitForChanges();
-
-    expect(eventListItem.animate).not.toHaveBeenCalled();
-
-    expect(page.root).toEqualHtml(`
-      <ix-event-list class="item-size-s">
-        <mock:shadow-root>
-          <ul>
-            <slot></slot>
-          </ul>
-        </mock:shadow-root>
-        <ix-event-list-item></ix-event-list-item>
-      </ix-event-list>
-    `);
-  });
 });
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,6 +28,7 @@ const config: PlaywrightTestConfig = { @@
           },
         },
       ],
+      retries: 2,
     };
     export default config;