fix: prevent toggling opened state on click when disabled (#6331) (#6332

)
vaadin · Aug 9, 2023 · 772499c · 772499c
1 parent 0a9e65b
commit 772499c
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/packages/accordion/test/accordion-panel.test.js b/packages/accordion/test/accordion-panel.test.js
@@ -1,5 +1,5 @@
 import { expect } from '@esm-bundle/chai';
-import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
+import { click, fixtureSync, nextRender } from '@vaadin/testing-helpers';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import '../vaadin-accordion-panel.js';
@@ -84,6 +84,12 @@ describe('vaadin-accordion-panel', () => {
         expect(panel.opened).to.be.false;
       });
 
+      it(`should not update opened on ${type} heading button click when disabled`, () => {
+        panel.disabled = true;
+        click(toggle);
+        expect(panel.opened).to.be.false;
+      });
+
       it(`should toggle opened on ${type} heading button Enter`, async () => {
         toggle.focus();
 

diff --git a/packages/details/src/collapsible-mixin.js b/packages/details/src/collapsible-mixin.js
@@ -64,6 +64,10 @@ export const CollapsibleMixin = (superClass) =>
       // Only handle click and not keydown, because `vaadin-details-summary` uses `ButtonMixin`
       // that already covers this logic, and `vaadin-accordion-heading` uses native `<button>`.
       this.addEventListener('click', ({ target }) => {
+        if (this.disabled) {
+          return;
+        }
+
         const summary = this.focusElement;
 
         if (summary && (target === summary || summary.contains(target))) {

diff --git a/packages/details/test/details.test.js b/packages/details/test/details.test.js
@@ -1,5 +1,5 @@
 import { expect } from '@esm-bundle/chai';
-import { fixtureSync } from '@vaadin/testing-helpers';
+import { click, fixtureSync } from '@vaadin/testing-helpers';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import '../vaadin-details.js';
@@ -108,6 +108,12 @@ describe('vaadin-details', () => {
         expect(details.opened).to.be.false;
       });
 
+      it(`should not update opened on ${type} summary click when disabled`, () => {
+        details.disabled = true;
+        click(summary);
+        expect(details.opened).to.be.false;
+      });
+
       it(`should toggle opened on ${type} summary child click`, () => {
         const child = summary.firstChild;
         if (child.nodeType === Node.ELEMENT_NODE) {