fix(core/button): prevent native events to be dispatched (#804)

siemens · Oct 5, 2023 · ac756a5 · ac756a5
1 parent 12d2472
commit ac756a5
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/packages/core/src/components/button/button-mixin.scss b/packages/core/src/components/button/button-mixin.scss
@@ -75,6 +75,8 @@
   }
 
   :host(.disabled) {
+    pointer-events: none;
+
     .btn-#{$name} {
       &.disabled,
       &:disabled {

diff --git a/packages/core/src/components/button/test/button.ct.ts b/packages/core/src/components/button/test/button.ct.ts
@@ -39,3 +39,11 @@ test('replace icon with spinner while loading', async ({ mount, page }) => {
   await expect(button.locator('ix-spinner')).toBeVisible();
   await expect(button.locator('ix-icon')).not.toBeVisible();
 });
+
+test('should not fire event when disabled', async ({ mount, page }) => {
+  await mount(`<ix-button disabled>Content</ix-button>`);
+  const button = page.locator('ix-button');
+
+  await expect(button).toHaveClass(/hydrated/);
+  expect(button).toHaveCSS('pointer-events', 'none');
+});