diff --git a/packages/fieldset/src/LionFieldset.js b/packages/fieldset/src/LionFieldset.js
index 9adc8a3c1..c958f11f8 100644
--- a/packages/fieldset/src/LionFieldset.js
+++ b/packages/fieldset/src/LionFieldset.js
@@ -1,6 +1,6 @@
import { SlotMixin, html } from '@lion/core';
import { LionLitElement } from '@lion/core/src/LionLitElement.js';
-import { CssClassMixin } from '@lion/core/src/CssClassMixin.js';
+import { DisabledMixin } from '@lion/core/src/DisabledMixin.js';
import { ObserverMixin } from '@lion/core/src/ObserverMixin.js';
import { ValidateMixin } from '@lion/validate';
import { FormControlMixin, FormRegistrarMixin } from '@lion/field';
@@ -15,16 +15,10 @@ const pascalCase = str => str.charAt(0).toUpperCase() + str.slice(1);
* @extends LionLitElement
*/
export class LionFieldset extends FormRegistrarMixin(
- FormControlMixin(ValidateMixin(CssClassMixin(SlotMixin(ObserverMixin(LionLitElement))))),
+ FormControlMixin(ValidateMixin(DisabledMixin(SlotMixin(ObserverMixin(LionLitElement))))),
) {
static get properties() {
return {
- ...super.properties,
- disabled: {
- type: Boolean,
- reflect: true,
- nonEmptyToClass: 'state-disabled',
- },
name: {
type: String,
},
@@ -35,13 +29,6 @@ export class LionFieldset extends FormRegistrarMixin(
};
}
- static get asyncObservers() {
- return {
- ...super.asyncObservers,
- _onDisabledChanged: ['disabled'],
- };
- }
-
get inputElement() {
return this;
}
@@ -121,6 +108,36 @@ export class LionFieldset extends FormRegistrarMixin(
this.removeEventListener('dirty-changed', this._updateDirtyClass);
}
+ updated(changedProps) {
+ super.updated(changedProps);
+
+ if (changedProps.has('disabled')) {
+ if (this.disabled) {
+ this.__requestChildrenToBeDisabled();
+ this.classList.add('state-disabled'); // eslint-disable-line wc/no-self-class
+ } else {
+ this.__retractRequestChildrenToBeDisabled();
+ this.classList.remove('state-disabled'); // eslint-disable-line wc/no-self-class
+ }
+ }
+ }
+
+ __requestChildrenToBeDisabled() {
+ this.formElementsArray.forEach(child => {
+ if (child.makeRequestToBeDisabled) {
+ child.makeRequestToBeDisabled();
+ }
+ });
+ }
+
+ __retractRequestChildrenToBeDisabled() {
+ this.formElementsArray.forEach(child => {
+ if (child.retractRequestToBeDisabled) {
+ child.retractRequestToBeDisabled();
+ }
+ });
+ }
+
// eslint-disable-next-line class-methods-use-this
inputGroupTemplate() {
return html`
@@ -251,13 +268,6 @@ export class LionFieldset extends FormRegistrarMixin(
this.classList[this.dirty ? 'add' : 'remove']('state-dirty');
}
- _onDisabledChanged({ disabled }, { disabled: oldDisabled }) {
- // do not propagate/override inital disabled value on nested form elements
- if (typeof oldDisabled !== 'undefined') {
- this._setValueForAllFormElements('disabled', disabled);
- }
- }
-
_setRole(role) {
this.setAttribute('role', role || 'group');
}
@@ -303,7 +313,7 @@ export class LionFieldset extends FormRegistrarMixin(
if (this.disabled) {
// eslint-disable-next-line no-param-reassign
- child.disabled = true;
+ child.makeRequestToBeDisabled();
}
if (name.substr(-2) === '[]') {
if (!Array.isArray(this.formElements[name])) {
diff --git a/packages/fieldset/stories/index.stories.js b/packages/fieldset/stories/index.stories.js
index b84d58863..e4b291b93 100644
--- a/packages/fieldset/stories/index.stories.js
+++ b/packages/fieldset/stories/index.stories.js
@@ -31,6 +31,30 @@ storiesOf('Forms|Fieldset', module)
`,
)
+ .add('Disabled', () => {
+ function toggleDisabled() {
+ const fieldset = document.querySelector('#fieldset');
+ fieldset.disabled = !fieldset.disabled;
+ }
+ return html`
+
+
+
+
+
+
+
+
+
+ `;
+ })
.add(
'Sub Fieldsets Data',
() => html`
diff --git a/packages/fieldset/test/lion-fieldset.test.js b/packages/fieldset/test/lion-fieldset.test.js
index cd33424b4..97762ffea 100644
--- a/packages/fieldset/test/lion-fieldset.test.js
+++ b/packages/fieldset/test/lion-fieldset.test.js
@@ -223,12 +223,11 @@ describe('', () => {
expect(el.formElements['hobbies[]'][1].disabled).to.equal(false);
});
- it('does not propagate/override inital disabled value on nested form elements', async () => {
+ it('does not propagate/override initial disabled value on nested form elements', async () => {
const el = await fixture(
`<${tagString}><${tagString} name="sub" disabled>${inputSlotString}${tagString}>${tagString}>`,
);
- await nextFrame();
-
+ await el.updateComplete;
expect(el.disabled).to.equal(false);
expect(el.formElements.sub.disabled).to.equal(true);
expect(el.formElements.sub.formElements.color.disabled).to.equal(true);
@@ -236,6 +235,16 @@ describe('', () => {
expect(el.formElements.sub.formElements['hobbies[]'][1].disabled).to.equal(true);
});
+ // classes are added only for backward compatibility - they are deprecated
+ it('sets a state-disabled class when disabled', async () => {
+ const el = await fixture(`<${tagString} disabled>${inputSlotString}${tagString}>`);
+ await nextFrame();
+ expect(el.classList.contains('state-disabled')).to.equal(true);
+ el.disabled = false;
+ await nextFrame();
+ expect(el.classList.contains('state-disabled')).to.equal(false);
+ });
+
describe('validation', () => {
it('validates on init', async () => {
function isCat(value) {