Fix up rendering for select elements with options component (#22978)

* Fix up rendering for select  elements with options component
* Commit updated compiled JS
* Update test case with more scenarios

Author: captainsafia

src/Components/Web.JS/dist/Release/blazor.server.js

@@ -257,7 +257,6 @@ export class BrowserRenderer {
     if (newDomElementRaw instanceof HTMLSelectElement && selectValuePropname in newDomElementRaw) {
       const selectValue = newDomElementRaw[selectValuePropname];
       newDomElementRaw.value = selectValue;
-      delete newDomElementRaw[selectValuePropname];
     }
   }
 

src/Components/Web.JS/dist/Release/blazor.webassembly.js

@@ -434,6 +434,41 @@ public void InputComponentsRespondToAsynchronouslyAddedMessages()
             Browser.Equal("invalid", () => input.GetAttribute("class"));
         }
 
+        [Fact]
+        public void SelectComponentSupportsOptionsComponent() {
+            var appElement = Browser.MountTestComponent<SelectVariantsComponent>();
+            var input = appElement.FindElement(By.Id("input-value"));
+            var showAdditionalOptionButton = appElement.FindElement(By.Id("show-additional-option"));
+            var selectWithComponent = appElement.FindElement(By.Id("select-with-component"));
+            var selectWithoutComponent = appElement.FindElement(By.Id("select-without-component"));
+
+            // Select with custom options component and HTML component behave the
+            // same when the selectElement.value is provided
+            Browser.Equal("B", () => selectWithoutComponent.GetAttribute("value"));
+            Browser.Equal("B", () => selectWithComponent.GetAttribute("value"));
+
+            // Reset to a value that doesn't exist
+            input.Clear();
+            input.SendKeys("D\t");
+
+            // Confirm that both values are cleared
+            Browser.Equal("", () => selectWithComponent.GetAttribute("value"));
+            Browser.Equal("", () => selectWithoutComponent.GetAttribute("value"));
+
+            // Dynamically showing the fourth option updates the selected value
+            showAdditionalOptionButton.Click();
+
+            Browser.Equal("D", () => selectWithComponent.GetAttribute("value"));
+            Browser.Equal("D", () => selectWithoutComponent.GetAttribute("value"));
+
+            // Change the value to one that does really doesn't exist
+            input.Clear();
+            input.SendKeys("F\t");
+
+            Browser.Equal("", () => selectWithComponent.GetAttribute("value"));
+            Browser.Equal("", () => selectWithoutComponent.GetAttribute("value"));
+        }
+
         private Func<string[]> CreateValidationMessagesAccessor(IWebElement appElement)
         {
             return () => appElement.FindElements(By.ClassName("validation-message"))

src/Components/Web.JS/src/Rendering/BrowserRenderer.ts

@@ -0,0 +1,8 @@
+<option @attributes="InputAttributes">@ChildContent</option>
+
+@code {
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object> InputAttributes { get; set; }
+
+    [Parameter] public RenderFragment ChildContent { get; set; }
+}

src/Components/test/E2ETest/Tests/FormsTest.cs

@@ -75,6 +75,7 @@
         <option value="BasicTestApp.SvgWithChildComponent">SVG with child component</option>
         <option value="BasicTestApp.TextOnlyComponent">Plain text</option>
         <option value="BasicTestApp.TouchEventComponent">Touch events</option>
+        <option value="BasicTestApp.SelectVariantsComponent">Select with component options</option>
     </select>
 
     <span id="runtime-info"><code><tt>@System.Runtime.InteropServices.RuntimeInformation.FrameworkDescription</tt></code></span>

src/Components/test/testassets/BasicTestApp/FormsTest/MyOption.razor

@@ -0,0 +1,33 @@
+@using BasicTestApp.FormsTest
+
+<input @bind="SelectValue" id="input-value"/>
+
+<select @bind="SelectValue" id="select-without-component">
+    <option value="A">Option A</option>
+    <option value="B">Option B</option>
+    <option value="C">Option C</option>
+    @if (ShowAdditionalOption) {
+        <option value="D">Option D</option>
+    }
+</select>
+
+<select @bind="SelectValue" id="select-with-component">
+    <MyOption value="A">Option A</MyOption>
+    <MyOption value="B">Option B</MyOption>
+    <MyOption value="C">Option C</MyOption>
+    @if (ShowAdditionalOption) {
+        <MyOption value="D">Option D</MyOption>
+    }
+</select>
+
+<button @onclick="ToggleShowAdditionalOption" id="show-additional-option"> Show Additional Option</button>
+
+@code
+{
+    public string SelectValue { get; set; } = "B";
+    public bool ShowAdditionalOption = false;
+
+    void ToggleShowAdditionalOption() {
+        ShowAdditionalOption = true;
+    }
+}