feat(text-field): reset value on type change (#6834)

This changes `fast-text-field` to reset its value any time `type` changes.

The reason for this is that switching between two incompatible input types may reset the inner control's value, which won't otherwise be reflected to the outer element.

For example, using `type="text"` and typing a value into the input, then changing to `type="number"`. This should reset the value, since the inner control will have already done so.

### 🎫 Issues

Fixes #6827

## 👩‍💻 Reviewer Notes

In material, this is solved by resetting the value any time the component's properties change at all. Maybe we should do the same here? I just wasn't sure if there's a lifecycle callback in FAST for when _any_ properties change.

I'm also not too sure the test I've added is consistent with how you usually test this stuff. I didn't see any other tests testing the members of the element itself, only via attributes.

If you want to solve this another way, let me know and I'm happy to update.

## 📑 Test Plan

Added a new test for changing `type` after input has occurred. 

## ✅ Checklist

### General

- [x] I have included a change request file using `$ yarn change`
- [x] I have added tests for my changes.
- [x] I have tested my changes.
- [ ] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](/docs/community/code-of-conduct/#our-standards) for this project.

### Component-specific

- [ ] I have added a new component
- [x] I have modified an existing component
- [ ] I have updated the [definition file](https://github.com/microsoft/fast/blob/master/packages/web-components/fast-components/CONTRIBUTING.md#definition)
- [ ] I have updated the [configuration file](https://github.com/microsoft/fast/blob/master/packages/web-components/fast-components/CONTRIBUTING.md#configuration)

change/@microsoft-fast-foundation-fbee44f7-f673-4961-a65a-be11acf4b0eb.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat(text-field): reset value on type change",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}

packages/web-components/fast-foundation/src/text-field/text-field.pw.spec.ts

@@ -263,6 +263,31 @@ test.describe("TextField", () => {
         expect(wasChanged).toBeTruthy();
     });
 
+    test("should reset value from control when `type` changes", async () => {
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+                <fast-text-field type="text"></fast-text-field>
+            `;
+        });
+
+        await control.evaluate<void, HTMLInputElement>(node => {
+            node.value = "a";
+            node.dispatchEvent(
+                new Event("change", {
+                    key: "a",
+                } as EventInit)
+            );
+        });
+
+        await expect(control).toHaveJSProperty("value", "a");
+
+        await element.evaluate<void, FASTTextField>(node => {
+          node.type = "number";
+        });
+
+        await expect(control).toHaveJSProperty("value", "");
+    });
+
     test.describe("with a type of `password`", () => {
         test("should report invalid validity when the `value` property is an empty string and `required` is true", async () => {
             await root.evaluate(node => {

packages/web-components/fast-foundation/src/text-field/text-field.ts

@@ -92,6 +92,9 @@ export class FASTTextField extends FormAssociatedTextField {
     private typeChanged(): void {
         if (this.proxy instanceof HTMLInputElement) {
             this.proxy.type = this.type;
+            if (this.proxy.value !== this.value) {
+                this.value = this.proxy.value;
+            }
             this.validate();
         }
     }