From 3d49a4100b676482b0c40875e9d46ef87c213f9f Mon Sep 17 00:00:00 2001
From: Thijs Louisse <Thijs.Louisse@ing.com>
Date: Sun, 1 Dec 2024 17:03:08 +0100
Subject: [PATCH] chore(core): prevent click on disabled elements

---
 .changeset/tasty-fishes-occur.md              |  5 ++++
 .../ui/components/core/src/DisabledMixin.js   |  6 +++++
 .../core/test/DisabledMixin.test.js           | 23 ++++++++++++++++++-
 3 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tasty-fishes-occur.md

diff --git a/.changeset/tasty-fishes-occur.md b/.changeset/tasty-fishes-occur.md
new file mode 100644
index 000000000..028b5ef4a
--- /dev/null
+++ b/.changeset/tasty-fishes-occur.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+prevent click on disabled elements
diff --git a/packages/ui/components/core/src/DisabledMixin.js b/packages/ui/components/core/src/DisabledMixin.js
index 3c83134bd..e2b97566d 100644
--- a/packages/ui/components/core/src/DisabledMixin.js
+++ b/packages/ui/components/core/src/DisabledMixin.js
@@ -74,6 +74,12 @@ const DisabledMixinImplementation = superclass =>
         }
       }
     }
+
+    click() {
+      if (this.disabled) return;
+
+      super.click();
+    }
   };
 
 export const DisabledMixin = dedupeMixin(DisabledMixinImplementation);
diff --git a/packages/ui/components/core/test/DisabledMixin.test.js b/packages/ui/components/core/test/DisabledMixin.test.js
index 70ad35e37..ceff42266 100644
--- a/packages/ui/components/core/test/DisabledMixin.test.js
+++ b/packages/ui/components/core/test/DisabledMixin.test.js
@@ -1,7 +1,8 @@
 import { expect, fixture } from '@open-wc/testing';
+import { DisabledMixin } from '@lion/ui/core.js';
 import { html } from 'lit/static-html.js';
 import { LitElement } from 'lit';
-import { DisabledMixin } from '@lion/ui/core.js';
+import sinon from 'sinon';
 
 describe('DisabledMixin', () => {
   class CanBeDisabled extends DisabledMixin(LitElement) {}
@@ -84,4 +85,24 @@ describe('DisabledMixin', () => {
     el.retractRequestToBeDisabled();
     expect(el.disabled).to.be.false;
   });
+
+  it('will not perform click when disabled', async () => {
+    const el = /** @type {CanBeDisabled} */ (
+      await fixture(html`<can-be-disabled></can-be-disabled>`)
+    );
+    const spy = sinon.spy();
+    el.addEventListener('click', spy);
+
+    el.click();
+
+    expect(spy.callCount).to.equal(1);
+
+    el.disabled = true;
+    el.click();
+    expect(spy.callCount).to.equal(1);
+
+    el.disabled = false;
+    el.click();
+    expect(spy.callCount).to.equal(2);
+  });
 });