Fix select multiple default value

packages/interpreter/src/js/hash.txt

@@ -1 +1 @@
-[6449103750905854967, 17669692872757955279, 13069001215487072322, 11420464406527728232, 3770103091118609057, 5444526391971481782, 7965007982501706197, 5052021921702764563, 12925655762638175824, 5638004933879392817]
+[6449103750905854967, 17669692872757955279, 13069001215487072322, 11420464406527728232, 3770103091118609057, 5444526391971481782, 7965007982501706197, 5052021921702764563, 12925655762638175824, 16153602427306015669]

packages/interpreter/src/ts/set_attribute.ts

@@ -1,7 +1,12 @@
 // A unified interface for setting attributes on a node
 
 // this function should try and stay fast, if possible
-export function setAttributeInner(node: HTMLElement, field: string, value: string, ns: string) {
+export function setAttributeInner(
+  node: HTMLElement,
+  field: string,
+  value: string,
+  ns: string
+) {
   // we support a single namespace by default: style
   if (ns === "style") {
     node.style.setProperty(field, value);
@@ -11,7 +16,7 @@ export function setAttributeInner(node: HTMLElement, field: string, value: strin
   // If there's a namespace, use setAttributeNS (svg, mathml, etc.)
   if (!!ns) {
     node.setAttributeNS(ns, field, value);
-    return
+    return;
   }
 
   // A few attributes are need to be set with either boolean values or require some sort of translation
@@ -53,18 +58,31 @@ export function setAttributeInner(node: HTMLElement, field: string, value: strin
       node.innerHTML = value;
       break;
 
-    // The presence of a an attribute is enough to set it to true, provided the value is being set to a truthy value
-    // Again, kinda ugly and would prefer this logic to be baked into dioxus-html at compiile time
-    default:
-      // https://github.com/facebook/react/blob/8b88ac2592c5f555f315f9440cbb665dd1e7457a/packages/react-dom/src/shared/DOMProperty.js#L352-L364
-      if (!truthy(value) && isBoolAttr(field)) {
-        node.removeAttribute(field);
-      } else {
-        node.setAttribute(field, value);
+    case "multiple":
+      setAttributeDefault(node, field, value);
+      // reset the selected value whenever multiple changes
+      // @ts-ignore
+      let options = node.options;
+      for (const option of options) {
+        option.selected = option.defaultSelected;
       }
+      break;
+
+    default:
+      setAttributeDefault(node, field, value);
   }
 }
 
+function setAttributeDefault(node: HTMLElement, field: string, value: string) {
+  // The presence of a an attribute is enough to set it to true, provided the value is being set to a truthy value
+  // Again, kinda ugly and would prefer this logic to be baked into dioxus-html at compile time
+  // https://github.com/facebook/react/blob/8b88ac2592c5f555f315f9440cbb665dd1e7457a/packages/react-dom/src/shared/DOMProperty.js#L352-L364
+  if (!truthy(value) && isBoolAttr(field)) {
+    node.removeAttribute(field);
+  } else {
+    node.setAttribute(field, value);
+  }
+}
 
 function truthy(val: string | boolean) {
   return val === "true" || val === true;

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"]);
+});