feat: Expose defaultValue/defaultChecked property for form-associated components (#1464)

Author: rkaraivanov

CHANGELOG.md

@@ -5,10 +5,18 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
+### Added
+- Form-associated elements now have a `defaultValue` property (`defaultChecked` for radio buttons, checkboxes, and switches). When a form is reset, components will use this property’s value as their new value or checked state.
+
 ### Changed
 - Calendar - allow passing a string value to the backing `value`, `values` and `activeDate` properties [#1467](https://github.com/IgniteUI/igniteui-webcomponents/issues/1467)
 - Date-time input - allow passing a string value to the backing `value`, `min` and `max` properties [#1467](https://github.com/IgniteUI/igniteui-webcomponents/issues/1467)
 - Date picker - allow passing a string value to the backing `value`, `min`, `max` and `activeDate` properties [#1467](https://github.com/IgniteUI/igniteui-webcomponents/issues/1467)
+- Component validation - aligned validation constraints to follow the behavior of their native HTML counterparts.
+  For example, `minlength` will no longer trigger a `tooShort` validity state, unless there is text present in the component.
+
+### Fixed
+- Combo - Rendering issue after Edge browser autofill behavior [#1497](https://github.com/IgniteUI/igniteui-webcomponents/issues/1497)
 
 ## [5.1.2] - 2024-11-04
 ### Added

src/components/button/button.spec.ts

@@ -1,7 +1,11 @@
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 
 import { defineComponents } from '../common/definitions/defineComponents.js';
-import { FormAssociatedTestBed, isFocused } from '../common/utils.spec.js';
+import {
+  createFormAssociatedTestBed,
+  isFocused,
+} from '../common/utils.spec.js';
+import IgcInputComponent from '../input/input.js';
 import IgcButtonComponent from './button.js';
 
 const Variants: Array<IgcButtonComponent['variant']> = [
@@ -14,7 +18,7 @@ const Types: Array<IgcButtonComponent['type']> = ['button', 'reset', 'submit'];
 
 describe('Button tests', () => {
   let button: IgcButtonComponent;
-  before(() => defineComponents(IgcButtonComponent));
+  before(() => defineComponents(IgcButtonComponent, IgcInputComponent));
 
   describe('Button component', () => {
     const ignored_DOM_parts = {
@@ -214,49 +218,47 @@ describe('Button tests', () => {
   });
 
   describe('Form integration', () => {
-    const spec = new FormAssociatedTestBed(
-      html`<input type="text" name="username" value="John Doe" />
-        <igc-button type="submit">Submit</igc-button>`
-    );
+    let button: IgcButtonComponent;
+    const spec = createFormAssociatedTestBed<IgcInputComponent>(html`
+      <igc-input type="text" name="username" value="John Doe"></igc-input>
+      <igc-button type="submit">Submit</igc-button>
+    `);
 
-    beforeEach(async () => await spec.setup(IgcButtonComponent.tagName));
+    beforeEach(async () => {
+      await spec.setup(IgcInputComponent.tagName);
+      button = spec.form.querySelector(IgcButtonComponent.tagName)!;
+    });
 
     it('is form associated', async () => {
-      expect(spec.element.form).to.equal(spec.form);
+      expect(button.form).to.equal(spec.form);
     });
 
     it('submits the associated form', async () => {
-      const button = spec.element as unknown as IgcButtonComponent;
-
       const handler = (event: SubmitEvent) => {
         event.preventDefault();
-        expect(
-          new FormData(event.target as HTMLFormElement).get('username')
-        ).to.equal('John Doe');
+        expect(new FormData(spec.form).get('username')).to.equal('John Doe');
       };
 
       spec.form.addEventListener('submit', handler, { once: true });
       button.click();
     });
 
     it('resets the associated form', async () => {
-      const button = spec.element as unknown as IgcButtonComponent;
-      const input = spec.form.querySelector('input') as HTMLInputElement;
-
-      input.value = 'Jane Doe';
+      spec.setProperties({ value: 'Jane Doe' });
       button.type = 'reset';
-      await elementUpdated(button);
 
       button.click();
-      expect(input.value).to.equal('John Doe');
+      expect(spec.element.value).to.equal('John Doe');
     });
 
-    it('reflects disabled ancestor state', async () => {
+    it('reflects disabled ancestor state', () => {
       spec.setAncestorDisabledState(true);
       expect(spec.element.disabled).to.be.true;
+      expect(button.disabled).to.be.true;
 
       spec.setAncestorDisabledState(false);
       expect(spec.element.disabled).to.be.false;
+      expect(button.disabled).to.be.false;
     });
   });
 });

src/components/checkbox/checkbox-base.ts

@@ -6,6 +6,11 @@ import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedCheckboxRequiredMixin } from '../common/mixins/forms/associated-required.js';
+import {
+  type FormValue,
+  createFormValueState,
+  defaultBooleanTransformers,
+} from '../common/mixins/forms/form-value.js';
 import { isEmpty } from '../common/util.js';
 import { checkBoxValidators } from './validators.js';
 
@@ -34,8 +39,8 @@ export class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixi
   }
 
   protected _kbFocus = addKeyboardFocusRing(this);
+  protected override _formValue: FormValue<boolean>;
   protected _value!: string;
-  protected _checked = false;
 
   @query('input', true)
   protected input!: HTMLInputElement;
@@ -69,13 +74,12 @@ export class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixi
    */
   @property({ type: Boolean })
   public set checked(value: boolean) {
-    this._checked = Boolean(value);
-    this._setFormValue(this._checked ? this.value || 'on' : null);
+    this._formValue.setValueAndFormState(value);
     this._validate();
   }
 
   public get checked(): boolean {
-    return this._checked;
+    return this._formValue.value;
   }
 
   /**
@@ -85,6 +89,15 @@ export class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixi
   @property({ reflect: true, attribute: 'label-position' })
   public labelPosition: 'before' | 'after' = 'after';
 
+  constructor() {
+    super();
+
+    this._formValue = createFormValueState(this, {
+      initialValue: false,
+      transformers: defaultBooleanTransformers,
+    });
+  }
+
   protected override createRenderRoot() {
     const root = super.createRenderRoot();
     this.hideLabel = isEmpty(this.label);