Fix constraint validation in components (#6299)

* allow passing anchor target to validate() method of form-associated * fix validation in TextField * fix validation in Button * fix validation in Combobox * fix validation in NumberField * fix validation in Search * fix validation in TextArea * Change files * update readme * inheirt docs for components * Add API docs for validate() API * update API report * remove references to private interface Co-authored-by: nicholasrice <[email protected]>
microsoft · Aug 25, 2022 · 7ca925b · 7ca925b
1 parent 8ed6b1a
commit 7ca925b
Show file tree

Hide file tree

Showing 15 changed files with 111 additions and 55 deletions.
diff --git a/change/@microsoft-fast-foundation-eb26a2f6-c059-4ee2-bd81-3886503e454b.json b/change/@microsoft-fast-foundation-eb26a2f6-c059-4ee2-bd81-3886503e454b.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fix constraint validation in focus-delegated components",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
@@ -764,6 +764,7 @@ export class FASTButton extends FormAssociatedButton {
     type: "submit" | "reset" | "button";
     // (undocumented)
     protected typeChanged(previous: "submit" | "reset" | "button" | void, next: "submit" | "reset" | "button"): void;
+    validate(): void;
 }
 
 // @internal
@@ -884,6 +885,7 @@ export class FASTCombobox extends FormAssociatedCombobox {
     setPositioning(): void;
     // @internal
     slottedOptionsChanged(prev: Element[] | undefined, next: Element[]): void;
+    validate(): void;
     get value(): string;
     set value(next: string);
 }
@@ -1353,6 +1355,7 @@ export class FASTNumberField extends FormAssociatedNumberField {
     step: number;
     stepDown(): void;
     stepUp(): void;
+    validate(): void;
     get valueAsNumber(): number;
     set valueAsNumber(next: number);
     // @internal
@@ -1621,6 +1624,7 @@ export class FASTSearch extends FormAssociatedSearch {
     spellcheck: boolean;
     // (undocumented)
     protected spellcheckChanged(): void;
+    validate(): void;
 }
 
 // @internal
@@ -1886,6 +1890,7 @@ export class FASTTextArea extends FormAssociatedTextArea {
     spellcheck: boolean;
     // (undocumented)
     protected spellcheckChanged(): void;
+    validate(): void;
 }
 
 // @internal
@@ -1937,6 +1942,7 @@ export class FASTTextField extends FormAssociatedTextField {
     // (undocumented)
     protected spellcheckChanged(): void;
     type: TextFieldType;
+    validate(): void;
 }
 
 // @internal
@@ -2185,8 +2191,7 @@ export interface FormAssociated extends Omit<ElementInternals_2, "labels"> {
     requiredChanged(prev: boolean, next: boolean): void;
     // (undocumented)
     stopPropagation(e: Event): void;
-    // (undocumented)
-    validate(): void;
+    validate(anchor?: HTMLElement): void;
     // (undocumented)
     value: string;
     // (undocumented)

diff --git a/packages/web-components/fast-foundation/src/button/README.md b/packages/web-components/fast-foundation/src/button/README.md
@@ -109,14 +109,15 @@ This component is built with the expectation that focus is delegated to the butt
 
 #### Methods
 
-| Name                    | Privacy   | Description | Parameters                                                                                 | Return | Inherited From |
-| ----------------------- | --------- | ----------- | ------------------------------------------------------------------------------------------ | ------ | -------------- |
-| `formactionChanged`     | protected |             |                                                                                            | `void` |                |
-| `formenctypeChanged`    | protected |             |                                                                                            | `void` |                |
-| `formmethodChanged`     | protected |             |                                                                                            | `void` |                |
-| `formnovalidateChanged` | protected |             |                                                                                            | `void` |                |
-| `formtargetChanged`     | protected |             |                                                                                            | `void` |                |
-| `typeChanged`           | protected |             | `previous: "submit" or "reset" or "button" or void, next: "submit" or "reset" or "button"` | `void` |                |
+| Name                    | Privacy   | Description                                       | Parameters                                                                                 | Return | Inherited From |
+| ----------------------- | --------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------ | -------------- |
+| `formactionChanged`     | protected |                                                   |                                                                                            | `void` |                |
+| `formenctypeChanged`    | protected |                                                   |                                                                                            | `void` |                |
+| `formmethodChanged`     | protected |                                                   |                                                                                            | `void` |                |
+| `formnovalidateChanged` | protected |                                                   |                                                                                            | `void` |                |
+| `formtargetChanged`     | protected |                                                   |                                                                                            | `void` |                |
+| `typeChanged`           | protected |                                                   | `previous: "submit" or "reset" or "button" or void, next: "submit" or "reset" or "button"` | `void` |                |
+| `validate`              | public    | {@inheritDoc (FormAssociated:interface).validate} |                                                                                            | `void` |                |
 
 #### Attributes
 

diff --git a/packages/web-components/fast-foundation/src/button/button.ts b/packages/web-components/fast-foundation/src/button/button.ts
@@ -154,6 +154,11 @@ export class FASTButton extends FormAssociatedButton {
     @observable
     public defaultSlottedContent: HTMLElement[];
 
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    public validate(): void {
+        super.validate(this.control);
+    }
+
     /**
      * @internal
      */

diff --git a/packages/web-components/fast-foundation/src/combobox/README.md b/packages/web-components/fast-foundation/src/combobox/README.md
@@ -184,6 +184,7 @@ See [listbox-option](/docs/components/listbox-option) for more information.
 
 | Name                 | Privacy   | Description                                                                | Parameters                                                             | Return | Inherited From |
 | -------------------- | --------- | -------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------ | -------------- |
+| `validate`           | public    | {@inheritDoc (FormAssociated:interface).validate}                          |                                                                        | `void` |                |
 | `positionChanged`    | protected |                                                                            | `prev: SelectPosition or undefined, next: SelectPosition or undefined` | `void` |                |
 | `filterOptions`      | public    | Filter available options by text value.                                    |                                                                        | `void` |                |
 | `setPositioning`     | public    | Calculate and apply listbox positioning based on available viewport space. | `force`                                                                | `void` |                |

diff --git a/packages/web-components/fast-foundation/src/combobox/combobox.ts b/packages/web-components/fast-foundation/src/combobox/combobox.ts
@@ -98,6 +98,11 @@ export class FASTCombobox extends FormAssociatedCombobox {
         this.updateValue();
     }
 
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    public validate(): void {
+        super.validate(this.control);
+    }
+
     private get isAutocompleteInline(): boolean {
         return (
             this.autocomplete === ComboboxAutocomplete.inline || this.isAutocompleteBoth

diff --git a/packages/web-components/fast-foundation/src/form-associated/form-associated.ts b/packages/web-components/fast-foundation/src/form-associated/form-associated.ts
@@ -125,7 +125,14 @@ export interface FormAssociated extends Omit<ElementInternals, "labels"> {
     nameChanged?(previous: string, next: string): void;
     requiredChanged(prev: boolean, next: boolean): void;
     stopPropagation(e: Event): void;
-    validate(): void;
+
+    /**
+     * Sets the validity of the custom element. By default this uses the proxy element to determine
+     * validity, but this can be extended or replaced in implementation.
+     *
+     * @param anchor - The anchor element to provide to ElementInternals.setValidity for surfacing the browser's constraint validation UI
+     */
+    validate(anchor?: HTMLElement): void;
     valueChanged(previous: string, next: string): void;
 }
 
@@ -625,13 +632,14 @@ export function FormAssociated<T extends ConstructableFormAssociated>(BaseCtor:
             this.shadowRoot?.removeChild(this.proxySlot as HTMLSlotElement);
         }
 
-        /**
-         * Sets the validity of the custom element. By default this uses the proxy element to determine
-         * validity, but this can be extended or replaced in implementation.
-         */
-        public validate(): void {
+        /** {@inheritDoc (FormAssociated:interface).validate} */
+        public validate(anchor?: HTMLElement): void {
             if (this.proxy instanceof HTMLElement) {
-                this.setValidity(this.proxy.validity, this.proxy.validationMessage);
+                this.setValidity(
+                    this.proxy.validity,
+                    this.proxy.validationMessage,
+                    anchor
+                );
             }
         }
 

diff --git a/packages/web-components/fast-foundation/src/number-field/README.md b/packages/web-components/fast-foundation/src/number-field/README.md
@@ -129,11 +129,12 @@ This component is built with the expectation that focus is delegated to the inpu
 
 #### Methods
 
-| Name       | Privacy | Description                               | Parameters | Return | Inherited From |
-| ---------- | ------- | ----------------------------------------- | ---------- | ------ | -------------- |
-| `stepUp`   | public  | Increments the value using the step value |            | `void` |                |
-| `stepDown` | public  | Decrements the value using the step value |            | `void` |                |
-| `select`   | public  | Selects all the text in the number field  |            | `void` |                |
+| Name       | Privacy | Description                                       | Parameters | Return | Inherited From |
+| ---------- | ------- | ------------------------------------------------- | ---------- | ------ | -------------- |
+| `validate` | public  | {@inheritDoc (FormAssociated:interface).validate} |            | `void` |                |
+| `stepUp`   | public  | Increments the value using the step value         |            | `void` |                |
+| `stepDown` | public  | Decrements the value using the step value         |            | `void` |                |
+| `select`   | public  | Selects all the text in the number field          |            | `void` |                |
 
 #### Events
 

diff --git a/packages/web-components/fast-foundation/src/number-field/number-field.ts b/packages/web-components/fast-foundation/src/number-field/number-field.ts
@@ -235,6 +235,11 @@ export class FASTNumberField extends FormAssociatedNumberField {
         this.isUserInput = false;
     }
 
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    public validate(): void {
+        super.validate(this.control);
+    }
+
     /**
      * Sets the internal value to a valid number between the min and max properties
      * @param value - user input

diff --git a/packages/web-components/fast-foundation/src/search/README.md b/packages/web-components/fast-foundation/src/search/README.md
@@ -108,18 +108,19 @@ This component is built with the expectation that focus is delegated to the inpu
 
 #### Methods
 
-| Name                 | Privacy   | Description                             | Parameters | Return | Inherited From |
-| -------------------- | --------- | --------------------------------------- | ---------- | ------ | -------------- |
-| `readOnlyChanged`    | protected |                                         |            | `void` |                |
-| `autofocusChanged`   | protected |                                         |            | `void` |                |
-| `placeholderChanged` | protected |                                         |            | `void` |                |
-| `listChanged`        | protected |                                         |            | `void` |                |
-| `maxlengthChanged`   | protected |                                         |            | `void` |                |
-| `minlengthChanged`   | protected |                                         |            | `void` |                |
-| `patternChanged`     | protected |                                         |            | `void` |                |
-| `sizeChanged`        | protected |                                         |            | `void` |                |
-| `spellcheckChanged`  | protected |                                         |            | `void` |                |
-| `handleClearInput`   | public    | Handles the control's clear value event |            | `void` |                |
+| Name                 | Privacy   | Description                                       | Parameters | Return | Inherited From |
+| -------------------- | --------- | ------------------------------------------------- | ---------- | ------ | -------------- |
+| `readOnlyChanged`    | protected |                                                   |            | `void` |                |
+| `autofocusChanged`   | protected |                                                   |            | `void` |                |
+| `placeholderChanged` | protected |                                                   |            | `void` |                |
+| `listChanged`        | protected |                                                   |            | `void` |                |
+| `maxlengthChanged`   | protected |                                                   |            | `void` |                |
+| `minlengthChanged`   | protected |                                                   |            | `void` |                |
+| `patternChanged`     | protected |                                                   |            | `void` |                |
+| `sizeChanged`        | protected |                                                   |            | `void` |                |
+| `spellcheckChanged`  | protected |                                                   |            | `void` |                |
+| `validate`           | public    | {@inheritDoc (FormAssociated:interface).validate} |            | `void` |                |
+| `handleClearInput`   | public    | Handles the control's clear value event           |            | `void` |                |
 
 #### Attributes
 

diff --git a/packages/web-components/fast-foundation/src/search/search.ts b/packages/web-components/fast-foundation/src/search/search.ts
@@ -200,6 +200,11 @@ export class FASTSearch extends FormAssociatedSearch {
         }
     }
 
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    public validate(): void {
+        super.validate(this.control);
+    }
+
     /**
      * Handles the internal control's `input` event
      * @internal

diff --git a/packages/web-components/fast-foundation/src/text-area/README.md b/packages/web-components/fast-foundation/src/text-area/README.md
@@ -117,15 +117,16 @@ This component is built with the expectation that focus is delegated to the inpu
 
 #### Methods
 
-| Name                | Privacy   | Description                           | Parameters | Return | Inherited From |
-| ------------------- | --------- | ------------------------------------- | ---------- | ------ | -------------- |
-| `readOnlyChanged`   | protected |                                       |            | `void` |                |
-| `autofocusChanged`  | protected |                                       |            | `void` |                |
-| `listChanged`       | protected |                                       |            | `void` |                |
-| `maxlengthChanged`  | protected |                                       |            | `void` |                |
-| `minlengthChanged`  | protected |                                       |            | `void` |                |
-| `spellcheckChanged` | protected |                                       |            | `void` |                |
-| `select`            | public    | Selects all the text in the text area |            | `void` |                |
+| Name                | Privacy   | Description                                       | Parameters | Return | Inherited From |
+| ------------------- | --------- | ------------------------------------------------- | ---------- | ------ | -------------- |
+| `readOnlyChanged`   | protected |                                                   |            | `void` |                |
+| `autofocusChanged`  | protected |                                                   |            | `void` |                |
+| `listChanged`       | protected |                                                   |            | `void` |                |
+| `maxlengthChanged`  | protected |                                                   |            | `void` |                |
+| `minlengthChanged`  | protected |                                                   |            | `void` |                |
+| `spellcheckChanged` | protected |                                                   |            | `void` |                |
+| `select`            | public    | Selects all the text in the text area             |            | `void` |                |
+| `validate`          | public    | {@inheritDoc (FormAssociated:interface).validate} |            | `void` |                |
 
 #### Events
 

diff --git a/packages/web-components/fast-foundation/src/text-area/text-area.ts b/packages/web-components/fast-foundation/src/text-area/text-area.ts
@@ -207,6 +207,11 @@ export class FASTTextArea extends FormAssociatedTextArea {
     public handleChange(): void {
         this.$emit("change");
     }
+
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    public validate(): void {
+        super.validate(this.control);
+    }
 }
 
 /**