Make <textarea> a void element

examples/suspense/src/main.rs

@@ -36,7 +36,7 @@ fn app_content() -> HtmlResult {
 
  Ok(html! {
  <div class="content-area">
- <textarea value={value.to_string()} oninput={on_text_input}></textarea>
+ <textarea value={value.to_string()} oninput={on_text_input} />
  <div class="action-area">
  <button onclick={on_take_a_break}>{"Take a break!"}</button>
  <div class="hint">{"You can take a break at anytime"}<br />{"and your work will be preserved."}</div>

examples/suspense/src/struct_consumer.rs

@@ -59,7 +59,7 @@ impl Component for BaseAppContent {
  let on_take_a_break = ctx.link().callback(|_| Msg::TakeABreak);
  html! {
  <div class="content-area">
- <textarea value={self.value.clone()} {oninput}></textarea>
+ <textarea value={self.value.clone()} {oninput} />
  <div class="action-area">
  <button onclick={on_take_a_break}>{"Take a break!"}</button>
  <div class="hint">{"You can take a break at anytime"}<br />{"and your work will be preserved."}</div>

packages/yew-macro/src/html_tree/html_element.rs

@@ -53,6 +53,16 @@ impl Parse for HtmlElement {
  //
  // For dynamic tags this is done at runtime!
  match name.to_ascii_lowercase_string().as_str() {
+ "textarea" => {
+ return Err(syn::Error::new_spanned(
+ open.to_spanned(),
+ "the tag `<textarea>` is a void element and cannot have children (hint: \
+ to provide value to it, rewrite it as `<textarea value={x} />`. If you \
+ wish to set the default value, rewrite it as `<textarea defaultvalue={x} \
+ />`)",
+ ))
+ }
+
  "area" | "base" | "br" | "col" | "embed" | "hr" | "img" | "input" | "link"
  | "meta" | "param" | "source" | "track" | "wbr" => {
  return Err(syn::Error::new_spanned(
@@ -61,8 +71,9 @@ impl Parse for HtmlElement {
  "the tag `<{name}>` is a void element and cannot have children (hint: \
  rewrite this as `<{name} />`)",
  ),
- ));
+ ))
  }
+
  _ => {}
  }
  }
@@ -117,23 +128,34 @@ impl ToTokens for HtmlElement {
  checked,
  listeners,
  special,
+ defaultvalue,
  } = &props;
 
  // attributes with special treatment
 
  let node_ref = special.wrap_node_ref_attr();
  let key = special.wrap_key_attr();
- let value = value
- .as_ref()
- .map(|prop| wrap_attr_value(prop.value.optimize_literals()))
- .unwrap_or(quote! { ::std::option::Option::None });
- let checked = checked
- .as_ref()
- .map(|attr| {
- let value = &attr.value;
- quote! { ::std::option::Option::Some( #value ) }
- })
- .unwrap_or(quote! { ::std::option::Option::None });
+ let value = || {
+ value
+ .as_ref()
+ .map(|prop| wrap_attr_value(prop.value.optimize_literals()))
+ .unwrap_or(quote! { ::std::option::Option::None })
+ };
+ let checked = || {
+ checked
+ .as_ref()
+ .map(|attr| {
+ let value = &attr.value;
+ quote! { ::std::option::Option::Some( #value ) }
+ })
+ .unwrap_or(quote! { ::std::option::Option::None })
+ };
+ let defaultvalue = || {
+ defaultvalue
+ .as_ref()
+ .map(|prop| wrap_attr_value(prop.value.optimize_literals()))
+ .unwrap_or(quote! { ::std::option::Option::None })
+ };
 
  // other attributes
 
@@ -329,6 +351,8 @@ impl ToTokens for HtmlElement {
  }
  let node = match &*name {
  "input" => {
+ let value = value();
+ let checked = checked();
  quote! {
  ::std::convert::Into::<::yew::virtual_dom::VNode>::into(
  ::yew::virtual_dom::VTag::__new_input(
@@ -343,10 +367,13 @@ impl ToTokens for HtmlElement {
  }
  }
  "textarea" => {
+ let value = value();
+ let defaultvalue = defaultvalue();
  quote! {
  ::std::convert::Into::<::yew::virtual_dom::VNode>::into(
  ::yew::virtual_dom::VTag::__new_textarea(
  #value,
+ #defaultvalue,
  #node_ref,
  #key,
  #attributes,
@@ -408,6 +435,9 @@ impl ToTokens for HtmlElement {
  #[cfg(not(nightly_yew))]
  let invalid_void_tag_msg_start = "";
 
+ let value = value();
+ let checked = checked();
+ let defaultvalue = defaultvalue();
  // this way we get a nice error message (with the correct span) when the expression
  // doesn't return a valid value
  quote_spanned! {expr.span()=> {
@@ -439,6 +469,7 @@ impl ToTokens for HtmlElement {
  _ if "textarea".eq_ignore_ascii_case(::std::convert::AsRef::<::std::primitive::str>::as_ref(&#vtag_name)) => {
  ::yew::virtual_dom::VTag::__new_textarea(
  #value,
+ #defaultvalue,
  #node_ref,
  #key,
  #attributes,
@@ -473,7 +504,7 @@ impl ToTokens for HtmlElement {
  ::std::debug_assert!(
  !::std::matches!(#vtag.tag().to_ascii_lowercase().as_str(),
  "area" | "base" | "br" | "col" | "embed" | "hr" | "img" | "input"
- | "link" | "meta" | "param" | "source" | "track" | "wbr"
+ | "link" | "meta" | "param" | "source" | "track" | "wbr" | "textarea"
  ),
  concat!(#invalid_void_tag_msg_start, "a dynamic tag tried to create a `<{0}>` tag with children. `<{0}>` is a void element which can't have any children."),
  #vtag.tag(),

packages/yew-macro/src/props/element.rs

@@ -25,6 +25,7 @@ pub struct ElementProps {
  pub classes: Option<ClassesForm>,
  pub booleans: Vec<Prop>,
  pub value: Option<Prop>,
+ pub defaultvalue: Option<Prop>,
  pub checked: Option<Prop>,
  pub special: SpecialProps,
 }
@@ -47,6 +48,7 @@ impl Parse for ElementProps {
  .map(|prop| ClassesForm::from_expr(prop.value));
  let value = props.pop("value");
  let checked = props.pop("checked");
+ let defaultvalue = props.pop("defaultvalue");
  let special = props.special;
 
  Ok(Self {
@@ -57,6 +59,7 @@ impl Parse for ElementProps {
  booleans: booleans.into_vec(),
  value,
  special,
+ defaultvalue,
  })
  }
 }

packages/yew-macro/tests/html_macro/element-fail.rs

@@ -64,6 +64,8 @@ fn compile_fail() {
 
  // void element with children
  html! { <input type="text"></input> };
+ // <textarea> should have a custom error message explaining how to set its default value
+ html! { <textarea>{"default value"}</textarea> }
  // make sure that capitalization doesn't matter for the void children check
  html! { <iNpUt type="text"></iNpUt> };