fix(sbb-checkbox, sbb-checkbox-panel): fix visual disabled state afte…

…r prop change (#2906) Closes #2905
sbb-design-systems · Jul 8, 2024 · 36999a9 · 36999a9
1 parent a8b26ff
commit 36999a9
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 5 deletions.
diff --git a/src/elements/checkbox/common/checkbox-common.spec.ts b/src/elements/checkbox/common/checkbox-common.spec.ts
@@ -570,7 +570,7 @@ describe(`checkbox common behaviors`, () => {
                 focusable: false,
               });
 
-              if (selector === 'sbb-checkbox-panel') {
+              if (selector !== 'input') {
                 expect(
                   element.shadowRoot!.querySelector<SbbVisualCheckboxElement>(
                     'sbb-visual-checkbox',
@@ -591,7 +591,7 @@ describe(`checkbox common behaviors`, () => {
                 focusable: false,
               });
 
-              if (selector === 'sbb-checkbox-panel') {
+              if (selector !== 'input') {
                 expect(
                   element.shadowRoot!.querySelector<SbbVisualCheckboxElement>(
                     'sbb-visual-checkbox',
@@ -615,7 +615,7 @@ describe(`checkbox common behaviors`, () => {
                 focusable: true,
               });
 
-              if (selector === 'sbb-checkbox-panel') {
+              if (selector !== 'input') {
                 expect(
                   element.shadowRoot!.querySelector<SbbVisualCheckboxElement>(
                     'sbb-visual-checkbox',
@@ -638,7 +638,8 @@ describe(`checkbox common behaviors`, () => {
                 ariaDisabled: undefined,
                 focusable: true,
               });
-              if (selector === 'sbb-checkbox-panel') {
+
+              if (selector !== 'input') {
                 expect(
                   element.shadowRoot!.querySelector<SbbVisualCheckboxElement>(
                     'sbb-visual-checkbox',
@@ -659,6 +660,14 @@ describe(`checkbox common behaviors`, () => {
                 focusable: false,
               });
 
+              if (selector !== 'input') {
+                expect(
+                  element.shadowRoot!.querySelector<SbbVisualCheckboxElement>(
+                    'sbb-visual-checkbox',
+                  )!.disabled,
+                ).to.be.true;
+              }
+
               element.toggleAttribute('disabled', false);
               await waitForLitRender(form);
 
@@ -669,6 +678,14 @@ describe(`checkbox common behaviors`, () => {
                 ariaDisabled: undefined,
                 focusable: true,
               });
+
+              if (selector !== 'input') {
+                expect(
+                  element.shadowRoot!.querySelector<SbbVisualCheckboxElement>(
+                    'sbb-visual-checkbox',
+                  )!.disabled,
+                ).to.be.false;
+              }
             });
 
             it('should be disabled by property', async () => {
@@ -683,6 +700,14 @@ describe(`checkbox common behaviors`, () => {
                 focusable: false,
               });
 
+              if (selector !== 'input') {
+                expect(
+                  element.shadowRoot!.querySelector<SbbVisualCheckboxElement>(
+                    'sbb-visual-checkbox',
+                  )!.disabled,
+                ).to.be.true;
+              }
+
               element.disabled = false;
               await waitForLitRender(form);
 
@@ -693,6 +718,14 @@ describe(`checkbox common behaviors`, () => {
                 ariaDisabled: undefined,
                 focusable: true,
               });
+
+              if (selector !== 'input') {
+                expect(
+                  element.shadowRoot!.querySelector<SbbVisualCheckboxElement>(
+                    'sbb-visual-checkbox',
+                  )!.disabled,
+                ).to.be.false;
+              }
             });
 
             it('should sync disabled attribute after re-enabling by property', async () => {
@@ -709,6 +742,14 @@ describe(`checkbox common behaviors`, () => {
                 ariaDisabled: undefined,
                 focusable: true,
               });
+
+              if (selector !== 'input') {
+                expect(
+                  element.shadowRoot!.querySelector<SbbVisualCheckboxElement>(
+                    'sbb-visual-checkbox',
+                  )!.disabled,
+                ).to.be.false;
+              }
             });
           });
         });

diff --git a/src/elements/core/mixins/form-associated-mixin.ts b/src/elements/core/mixins/form-associated-mixin.ts
@@ -163,7 +163,12 @@ export const SbbFormAssociatedMixin = <T extends Constructor<LitElement>>(
      * @internal
      */
     public formDisabledCallback(disabled: boolean): void {
-      this.formDisabled = disabled;
+      // This callback is triggered if the disabled property changes or the disabled attribute of a fieldset or form changes.
+      // We need to postpone the assignment, otherwise it interferes with disabled status setting
+      // and leads to a wrong state (e.g. embedded sbb-visual-checkbox).
+      Promise.resolve().then(() => {
+        this.formDisabled = disabled;
+      });
     }
 
     /**