Merge pull request #48 from micolous/expose-noderef

Expose NodeRef for FormControl and Link components
isosphere · Jan 16, 2025 · 6d1ccef · 6d1ccef
2 parents fecf06a + 69b6ced
commit 6d1ccef
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/packages/yew-bootstrap/src/component/form/form_control.rs b/packages/yew-bootstrap/src/component/form/form_control.rs
@@ -100,6 +100,17 @@ pub struct FormControlProps {
     /// Optional onclick event applied on the input
     #[prop_or_default]
     pub onclick: Callback<MouseEvent>,
+
+    /// Reference to the [NodeRef] of the form control's underlying `<input>`,
+    /// `<select>`, `<textarea>` element.
+    ///
+    /// Used by components which add custom event handlers directly to the DOM.
+    ///
+    /// See [*Node Refs* in the Yew documentation][0] for more information.
+    ///
+    /// [0]: https://yew.rs/docs/concepts/function-components/node-refs
+    #[prop_or_default]
+    pub node_ref: NodeRef,
 }
 
 
@@ -338,6 +349,7 @@ pub fn FormControl(props: &FormControlProps) -> Html {
                         onclick={ props.onclick.clone() }
                         required={ props.required }
                         autocomplete={ props.autocomplete.to_str() }
+                        ref={ props.node_ref.clone() }
                     />
                     { label_after }
                     { help }
@@ -367,6 +379,7 @@ pub fn FormControl(props: &FormControlProps) -> Html {
                         onchange={ props.onchange.clone() }
                         onclick={ props.onclick.clone() }
                         required={ props.required }
+                        ref={ props.node_ref.clone() }
                     >
                         { for props.children.clone() }
                     </select>
@@ -395,6 +408,7 @@ pub fn FormControl(props: &FormControlProps) -> Html {
                         onchange={ props.onchange.clone() }
                         onclick={ props.onclick.clone() }
                         required={ props.required }
+                        ref={ props.node_ref.clone() }
                     />
                     { label }
                     { help }
@@ -463,6 +477,7 @@ pub fn FormControl(props: &FormControlProps) -> Html {
                         oninput={ props.oninput.clone() }
                         required={ props.required }
                         autocomplete={ props.autocomplete.to_str() }
+                        ref={ props.node_ref.clone() }
                     />
                     { label_after }
                     { help }

diff --git a/packages/yew-bootstrap/src/component/link.rs b/packages/yew-bootstrap/src/component/link.rs
@@ -52,6 +52,16 @@ pub struct LinkProps {
     /// Optional text for the link
     #[prop_or_default]
     pub text: String,
+
+    /// Reference to the [NodeRef] of the link's underlying `<a>` element.
+    ///
+    /// Used by components which add custom event handlers directly to the DOM.
+    ///
+    /// See [*Node Refs* in the Yew documentation][0] for more information.
+    ///
+    /// [0]: https://yew.rs/docs/concepts/function-components/node-refs
+    #[prop_or_default]
+    pub node_ref: NodeRef,
 }
 
 impl Component for Link {
@@ -79,6 +89,7 @@ impl Component for Link {
                 role={props.url.is_none().then_some("button")}
                 href={props.url.clone()}
                 target={props.target.clone()}
+                ref={props.node_ref.clone()}
             >
                 { &props.text }
                 { for props.children.iter() }