diff --git a/examples/disabled.rs b/examples/disabled.rs new file mode 100644 index 000000000..e4ca7d9ee --- /dev/null +++ b/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" + } + } + }) +} diff --git a/packages/desktop/src/index.js b/packages/desktop/src/index.js index b4f673bf3..931eb7d32 100644 --- a/packages/desktop/src/index.js +++ b/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); + } } } } diff --git a/packages/web/src/dom.rs b/packages/web/src/dom.rs index 6de9247f5..e9cf66af2 100644 --- a/packages/web/src/dom.rs +++ b/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::() { + let _ = el.remove_attribute(name); + } + } else { + fallback(); + } + } } } }