Fix select multiple default value (#3953)

* Fix select multiple default value

* Add a playwright test for select multiple

packages/playwright-tests/web.spec.js

@@ -155,3 +155,21 @@ test("document elements", async ({ page }) => {
   const main = page.locator("#main");
   await expect(main).toHaveCSS("font-family", "Roboto");
 });
+
+test("select multiple", async ({ page }) => {
+  await page.goto("http://localhost:9999");
+  // wait until the select element is mounted
+  const staticSelect = page.locator("select#static-multiple-select");
+  await staticSelect.waitFor({ state: "attached" });
+  await expect(staticSelect).toHaveValues([]);
+  // Make sure the multiple attribute is actually set
+  await staticSelect.selectOption(["1", "2"]);
+  await expect(staticSelect).toHaveValues(["1", "2"]);
+
+  // The dynamic select element should act exactly the same
+  const dynamicSelect = page.locator("select#dynamic-multiple-select");
+  await dynamicSelect.waitFor({ state: "attached" });
+  await expect(dynamicSelect).toHaveValues([]);
+  await dynamicSelect.selectOption(["1", "2"]);
+  await expect(dynamicSelect).toHaveValues(["1", "2"]);
+});

packages/playwright-tests/web/src/main.rs

@@ -63,6 +63,7 @@ fn app() -> Element {
         OnMounted {}
         WebSysClosure {}
         DocumentElements {}
+        SelectMultiple {}
     }
 }
 
@@ -155,6 +156,29 @@ fn DocumentElements() -> Element {
     }
 }
 
+// Select elements have odd default behavior when you set the multiple attribute after mounting the element
+// Regression test for https://github.com/DioxusLabs/dioxus/issues/3185
+#[component]
+fn SelectMultiple() -> Element {
+    rsx! {
+        select {
+            id: "static-multiple-select",
+            // This is static and will be set in the template
+            multiple: "true",
+            option { label: "Value1", value: "1" }
+            option { label: "Value2", value: "2" }
+        }
+
+        select {
+            id: "dynamic-multiple-select",
+            // This is dynamic and will be set after it is mounted
+            multiple: true,
+            option { label: "Value1", value: "1" }
+            option { label: "Value2", value: "2" }
+        }
+    }
+}
+
 fn main() {
     tracing_wasm::set_as_global_default_with_config(
         tracing_wasm::WASMLayerConfigBuilder::default()