fix: Value of text-field is not updated when the text-field type changes

[sonntag-philipp]

🐛 Bug Report

When changing the type of a text-field which already contains content, the rules of the new type are automatically applied by the browser. This causes an automatic value change of the inner input element. This change is not reflected back to users of the web component. This makes the value that is display differ from the value that is accessible by the developer.

💻 Repro or Code Sample

I think this StackBlitz repro is the best explaination.

Steps to reproduce:

1. Paste the following text in the text-field: " Demo Text with leading spaces. ".
2. Open the JS console
3. Log the values using both buttons
4. Change the type of the text-field
   • Notice the visible change of the value
5. Log the values of the text-field again

🤔 Expected Behavior

The change of the inner input element should reflect back to the custom element and thus the user of the custom element.

😯 Current Behavior

The value of the inner input element is not reflected back to the custom element after an automatic value change due to the type change of the input.

💁 Possible Solution

Two-Way Binding of the value property.

🔦 Context

It doesn't affect me currently, as the type of an input field should not change after the user has set any value in my opinion. Even though this is an edge case, I think it is necessary to fix this behaviour.
This behaviour could be really confusing, especially while developing automated UI tests.

🌍 Your Environment

• OS & Device: MacOS
• Browser Microsoft Edge
• Version "@microsoft/fast-components": "^2.30.6"