Bug: implement form control validity property (#202)

Bug: implement form control validity property

Author: nielslyngsoe

packages/uui-base/lib/mixins/FormControlMixin.ts

@@ -16,6 +16,7 @@ export declare abstract class FormControlMixinInterface extends LitElement {
   formResetCallback(): void;
   checkValidity(): boolean;
   get validationMessage(): string;
+  get validity(): ValidityState;
   public setCustomValidity(error: string): void;
   protected _value: FormDataEntryValue | FormData;
   protected _internals: any;
@@ -302,6 +303,9 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
 
       const hasError = Object.values(this._validityState).includes(true);
 
+      // https://developer.mozilla.org/en-US/docs/Web/API/ValidityState#valid
+      this._validityState.valid = !hasError;
+
       if (hasError) {
         this.dispatchEvent(
           new UUIFormControlEvent(UUIFormControlEvent.INVALID)
@@ -347,6 +351,11 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
       return this._internals?.checkValidity();
     }
 
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
+    public get validity(): ValidityState {
+      return this._validityState;
+    }
+
     get validationMessage() {
       return this._internals?.validationMessage;
     }

packages/uui-button/lib/uui-button.element.ts

@@ -3,7 +3,7 @@ import {
   UUIHorizontalShakeKeyframes,
 } from '@umbraco-ui/uui-base/lib/animations';
 import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
-import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
+import { FormControlMixin, LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import {
   InterfaceLookDefaultValue,
@@ -14,7 +14,7 @@ import {
   iconWrong,
 } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
 import { css, html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 
 export type UUIButtonState = null | 'waiting' | 'success' | 'failed';
 
@@ -41,7 +41,9 @@ export type UUIButtonType = 'submit' | 'button' | 'reset';
  *  @cssprop --uui-button-contrast-disabled - overwrite the text color for disabled state
  */
 @defineElement('uui-button')
-export class UUIButtonElement extends LabelMixin('', LitElement) {
+export class UUIButtonElement extends FormControlMixin(
+  LabelMixin('', LitElement)
+) {
   static styles = [
     UUIHorizontalShakeKeyframes,
     css`
@@ -554,20 +556,18 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
   @property({ type: String, reflect: true })
   state: UUIButtonState = null;
 
-  /**
-   * This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.  Read more about form controls here https://web.dev/more-capable-form-controls/
-   * @type {boolean}
-   */
-  static readonly formAssociated = true;
-
-  private _internals;
+  @query('#button')
+  protected _button!: HTMLInputElement;
 
   constructor() {
     super();
-    this._internals = (this as any).attachInternals();
     this.addEventListener('click', this._onHostClick);
   }
 
+  protected getFormElement(): HTMLElement {
+    return this._button;
+  }
+
   private _onHostClick(e: MouseEvent) {
     if (this.disabled) {
       e.preventDefault();
@@ -637,7 +637,7 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
 
   render() {
     return html`
-      <button ?disabled=${this.disabled} aria-label="${this.label}">
+      <button id="button" ?disabled=${this.disabled} aria-label="${this.label}">
         ${this.renderState()} ${this.renderLabel()}
         <slot name="extra"></slot>
       </button>

packages/uui-combobox/lib/uui-combobox.element.ts

@@ -76,6 +76,17 @@ export class UUIComboboxElement extends FormControlMixin(LitElement) {
     `,
   ];
 
+  get value() {
+    return this._value;
+  }
+  set value(newValue) {
+    super.value = newValue;
+
+    if (typeof newValue === 'string') {
+      this._updateValue(newValue);
+    }
+  }
+
   /**
    * The search input.
    * @type { string }
@@ -151,12 +162,18 @@ export class UUIComboboxElement extends FormControlMixin(LitElement) {
 
       if (typeof this.value === 'string') {
         await this.updateComplete;
-        this._comboboxList.value = this.value;
-        this._displayValue = this._comboboxList?.displayValue || '';
+        this._updateValue(this.value);
       }
     }
   }
 
+  private _updateValue(value: string) {
+    if (this._comboboxList) {
+      this._comboboxList.value = value;
+      this._displayValue = this._comboboxList?.displayValue || '';
+    }
+  }
+
   protected getFormElement(): HTMLElement | undefined {
     return this._input;
   }

packages/uui-form/lib/uui-form.story.ts

@@ -137,18 +137,20 @@ export const Overview: Story = () => {
         <uui-form-layout-item>
           <uui-label for="MyCombobox" slot="label" required>Combobox</uui-label>
           <uui-combobox id="MyCombobox" name="combobox" required>
-            <uui-combobox-list-option value="1"
-              >Option 1</uui-combobox-list-option
-            >
-            <uui-combobox-list-option value="2"
-              >Option 2</uui-combobox-list-option
-            >
-            <uui-combobox-list-option value="3"
-              >Option 3</uui-combobox-list-option
-            >
-            <uui-combobox-list-option value="4"
-              >Option 4</uui-combobox-list-option
-            >
+            <uui-combobox-list>
+              <uui-combobox-list-option value="1"
+                >Option 1</uui-combobox-list-option
+              >
+              <uui-combobox-list-option value="2"
+                >Option 2</uui-combobox-list-option
+              >
+              <uui-combobox-list-option value="3"
+                >Option 3</uui-combobox-list-option
+              >
+              <uui-combobox-list-option value="4"
+                >Option 4</uui-combobox-list-option
+              >
+            </uui-combobox-list>
           </uui-combobox>
         </uui-form-layout-item>