Merge pull request #99 from DioxusLabs/jk/boolattrs

feat: handle bool attrs properly

examples/disabled.rs

@@ -0,0 +1,23 @@
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::desktop::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    let disabled = use_state(&cx, || false);
+
+    cx.render(rsx! {
+        div {
+            button {
+                onclick: move |_| disabled.set(!disabled.get()),
+                "click to " [if *disabled {"enable"} else {"disable"} ] " the lower button"
+            }
+
+            button {
+                disabled: "{disabled}",
+                "lower button"
+            }
+        }
+    })
+}

packages/desktop/src/index.js

@@ -369,7 +369,12 @@ class Interpreter {
           node.innerHTML = value;
           break;
         default:
-          node.setAttribute(name, value);
+          // https://github.com/facebook/react/blob/8b88ac2592c5f555f315f9440cbb665dd1e7457a/packages/react-dom/src/shared/DOMProperty.js#L352-L364
+          if (value == "false" && name != "capture" && name != "download") {
+            node.removeAttribute(name);
+          } else {
+            node.setAttribute(name, value);
+          }
       }
     }
   }

packages/web/src/dom.rs

@@ -347,7 +347,16 @@ impl WebsysDom {
                         fallback();
                     }
                 }
-                _ => fallback(),
+                _ => {
+                    // https://github.com/facebook/react/blob/8b88ac2592c5f555f315f9440cbb665dd1e7457a/packages/react-dom/src/shared/DOMProperty.js#L352-L364
+                    if value == "false" && ((name != "capture") && (name != "download")) {
+                        if let Some(el) = node.dyn_ref::<Element>() {
+                            let _ = el.remove_attribute(name);
+                        }
+                    } else {
+                        fallback();
+                    }
+                }
             }
         }
     }