fix(core): enable pointer events on disabled button (#10378)

taiga-family · Feb 17, 2025 · bf14135 · bf14135
1 parent 7c0076f
commit bf14135
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 6 deletions.
diff --git a/projects/core/styles/components/appearance.less b/projects/core/styles/components/appearance.less
@@ -37,7 +37,7 @@
     });
 
     .appearance-disabled({
-        pointer-events: none;
+        cursor: initial;
         opacity: var(--tui-disabled-opacity);
     });
 }
diff --git a/projects/core/styles/mixins/mixins.less b/projects/core/styles/mixins/mixins.less
@@ -2,11 +2,11 @@
 
 .interactive(@ruleset) {
     // TODO remove after dropping Safari 13 support
-    &:matches(a, button, select, textarea, input, label) {
+    &:matches(a, button, select, textarea, input, label):not(:disabled) {
         @ruleset();
     }
 
-    &:is(a, button, select, textarea, input, label) {
+    &:is(a, button, select, textarea, input, label):not(:disabled) {
         @ruleset();
     }
 }

diff --git a/projects/core/styles/mixins/mixins.scss b/projects/core/styles/mixins/mixins.scss
@@ -2,11 +2,11 @@
 
 @mixin interactive {
     // TODO remove after dropping Safari 13 support
-    &:matches(a, button, select, textarea, input) {
+    &:matches(a, button, select, textarea, input):not(:disabled) {
         @content;
     }
 
-    &:is(a, button, select, textarea, input) {
+    &:is(a, button, select, textarea, input):not(:disabled) {
         @content;
     }
 }

diff --git a/projects/demo-playwright/tests/addon-commerce/input-card-group.pw.spec.ts b/projects/demo-playwright/tests/addon-commerce/input-card-group.pw.spec.ts
@@ -54,7 +54,7 @@ test.describe('InputCardGroup', () => {
 
             const {numberTextfield} = new TuiInputCardGroupPO(apiPageExample);
 
-            await expect(numberTextfield).toHaveCSS('pointer-events', 'none');
+            await expect(numberTextfield).toHaveAttribute('disabled');
             await expect(numberTextfield).toHaveScreenshot(
                 '04-input-card-group-disabled.png',
             );

diff --git a/projects/demo/src/modules/components/button/examples/2/index.html b/projects/demo/src/modules/components/button/examples/2/index.html
@@ -46,6 +46,15 @@
     Floating
 </button>
 
+<button
+    appearance="primary"
+    disabled
+    tuiButton
+    type="button"
+>
+    Primary disabled
+</button>
+
 <div>
     See
     <a