Make `<textarea>` a void element #3465

its-the-shrimp · 2023-10-13T18:17:59Z

Description

Fixes #3296 by raising an error when trying to provide children to <textarea> and asserting the correct way to provide default value to it in the docs, which is the defaultvalue attribute also added with this PR.
Documents the peculiarities of <textarea> and the void elements in general.

Checklist

I have reviewed my own code
I have added tests

github-actions · 2023-10-13T18:21:04Z

Visit the preview URL for this PR (updated for commit 99f56b2):

https://yew-rs--pr3465-textarea2void-z2ndy58e.web.app

_{(expires Sun, 23 Feb 2025 19:41:53 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

github-actions · 2023-10-13T18:25:57Z

Size Comparison

examples	master (KB)	pull request (KB)	diff (KB)	diff (%)

✅ None of the examples has changed their size significantly.

github-actions · 2023-10-13T18:26:05Z

Benchmark - SSR

Yew Master

Benchmark	Round	Min (ms)	Max (ms)	Mean (ms)	Standard Deviation
Baseline	10	290.826	291.034	290.913	0.065
Hello World	10	471.984	488.676	476.680	6.105
Function Router	10	1569.542	1593.987	1580.913	7.930
Concurrent Task	10	1005.269	1007.316	1006.407	0.583
Many Providers	10	1031.671	1069.627	1047.253	14.496

Pull Request

Benchmark	Round	Min (ms)	Max (ms)	Mean (ms)	Standard Deviation
Baseline	10	290.989	307.824	293.588	5.522
Hello World	10	488.552	524.525	502.927	12.968
Function Router	10	1618.343	1642.243	1627.360	7.310
Concurrent Task	10	1005.565	1006.883	1006.383	0.413
Many Providers	10	1105.536	1150.234	1126.245	17.179

ranile · 2023-10-13T19:23:53Z

Why not recommend setting value? ~defaultValue works because defaultValue is a property on HTMLTextareaElement. Using value is how you should be interacting with the text area anyway. There's no point of having a textarea that you can't read from (technically, you can, with node refs but that is not the best way of doing things)

its-the-shrimp · 2023-10-13T19:47:35Z

We wouldn't recommend setting value because the MDN docs for <textarea> state explicitly that it doesn't work, and because children of <textarea> define not its value, but its default, initial value, which is exactly what setting ~defaultValue does as well.

ranile · 2023-10-13T20:15:02Z

The value attribute doesn't work on textarea but Yew has special handling for value for both input and textarea that makes it work (it makes value and ~value behave the same). If you want to listen to oninput on the text area and react to user input, you need to use the value property.

See this playground

its-the-shrimp · 2023-10-13T21:51:28Z

But the paragraph I've added to "html/elements" docs is specifically about the peculiarity of <textarea>: normally it accepts children, which define its defaultValue, but in Yew it's a void element and instead of children, ~defaultValue is provided, though value should indeed also be documented, I'll add that right now.

its-the-shrimp · 2023-10-13T21:54:55Z

Wait, why does <input>'s value need special handling if it already defines it?

ranile · 2023-10-13T21:56:20Z

Wait, why does <input>'s value need special handling if it already defines it?

The special handling predates the ~property syntax and controlled elements need it to be set as a property

its-the-shrimp · 2023-10-13T22:00:36Z

But then is it really special for <input>?

ranile · 2023-10-13T22:03:13Z

It's special because the value is always set as property, not attribute, for input

its-the-shrimp · 2023-10-13T22:24:39Z

Does that make a difference in case of <input>? I'm just wondering if it's worth it to explain all that in the docs or just pretend that <input> is a perfectly normal element

futursolo · 2023-10-14T01:23:24Z

Why not recommend setting value?

Setting a value makes an element controlled. An element with defaultvalue should remain uncontrolled.

But then is it really special for <input>?

Special handling for value and checked are required as these properties are controlled. This means that values are restored to the one provided to <input /> on every render regardless of whether a value is changed. The value displayed in an input is always in sync with the state associated with the value.
For other attributes, it only updates when an attribute is changed, added or removed.

futursolo · 2023-10-14T01:33:50Z

website/docs/concepts/html/elements.mdx

+Which would fail to compile, it's customary to write
+
+```html
+<textarea ~defaultValue="default value"></textarea>


Suggested change

<textarea ~defaultValue="default value"></textarea>

<textarea defaultvalue="default value" />

I am not in favour of promoting the property syntax for elements. It should only be reserved for cases where it is niche and should not / cannot be handled by the renderer (e.g.: custom elements). html! should work with built-in elements without users directly touching its properties.

I think we should make a special handing to assign defaultvalue (html! attribute) to value at the first time it is mounted.

I feel that there might be edge cases for ~defaultValue (property) when it is combined with Suspense as the element might be re-mounted.

And what would be the disadvantages to mimicking the actual HTML specification and make <textarea> accept children?

The childNodes for an HTMLTextAreaElement indicates its default value and not value.

Once the user starts to type in a textarea, normal means Yew uses to manipulate the DOM (e.g.: HTMLTextAreaElement.insertBefore) has no effect anymore. Manipulating childNodes does not reflect on the page.

Then we could, for example, not do anything with <textarea>'s children after it's inserted into the DOM, i.e. not reconcile it, which also might improve performance, besides, we already have special handling for <textarea>, it even has a separate variant for it in the VTagInner enum. It's just that going against the HTML spec would only unnecessarily complicate the framework from the perspective of the users, I believe that when it comes to HTML elements, we should strive to keep their usage in Yew as close to their actual definition in the standard as possible.

It's just that going against the HTML spec would only unnecessarily complicate the framework from the perspective of the users

The specification says that HtmlTextAreaElement's default value can be assigned via the defaultValue property. Since elements in Yew are created via document.createElement, we are not against the specification.

Specifically not reconciling textarea is only going to make users confused as it is not obvious to novice users that textarea is only defining its default value and value updates will need to be done via value attribute. It was also not obvious to me until after some previous discussion about making textarea to use children prop happened in the past.

This pull request makes it a compile error and suggests ~defaultValue to users, which is a better user experience IMO.

In addition, React and Vue both do not accept children for textarea. So we are consistent with the behaviour of major frameworks. This will ease the learning curve for users from these frameworks.

React: https://react.dev/reference/react-dom/components/textarea#props
Vue: https://vuejs.org/guide/essentials/forms.html#multiline-text

I'm curious about the use case where the textarea is needed and isn't controlled

examples/suspense/src/main.rs

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

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

futursolo · 2023-10-21T04:47:19Z

packages/yew/src/virtual_dom/vtag.rs

+            .render()
+            .await;
+
+        assert_eq!(s, r#"<textarea value="teststring"></textarea>"#);


Suggested change

assert_eq!(s, r#"<textarea value="teststring"></textarea>"#);

assert_eq!(s, r#"<textarea>teststring</textarea>"#);

Since we are rendering this as HTML, <textarea> does not accept value attribute.

If both value and default value are set, the value prop should have priority and the defaultvalue prop should have no effect.

How do we provide the value during SSR then? In CSR we manipulate the element directly for that

I have submitted a review suggestion below, which should be cover both defaultvalue and value.

The component only gets 1 chance to declare HTML, which should match the initial render of CSR.

When both defaultvalue and value are set in CSR, default value never shows and value is shown instead, as value is set.
SSR should match this behaviour.

In practice, it doesn't make sense to set both default value and value as the defaultvalue is never shown.

If both are set, we should console.warn and lint in the macro. The lint can be in a future PR but I would like to have the console.warn with this PR

We might not be able to create a lint on the macro level.

One can create a component library and it would make sense for them to passthrough both value and defaultvalue.

packages/yew/tests/hydration.rs

packages/yew/src/virtual_dom/vtag.rs

packages/yew/src/virtual_dom/vlist.rs

.gitignore

its-the-shrimp · 2023-10-22T21:11:51Z

There's definitely something wrong with the benchmarking CI action

futursolo

This should fix the SSR behaviour of textarea.

See above.

packages/yew/src/virtual_dom/vtag.rs

futursolo

There are some remaining style fixes.

Otherwise, LGTM.

packages/yew/tests/hydration.rs

packages/yew/tests/suspense.rs

its-the-shrimp · 2024-11-11T17:58:39Z

are there still any blockers to merging this?

github-actions · 2025-02-16T16:45:58Z

Benchmark - core

Yew Master

vnode           fastest       │ slowest       │ median        │ mean          │ samples │ iters
╰─ vnode_clone  2.401 ns      │ 2.587 ns      │ 2.407 ns      │ 2.415 ns      │ 100     │ 1000000000

Pull Request

vnode           fastest       │ slowest       │ median        │ mean          │ samples │ iters
╰─ vnode_clone  2.483 ns      │ 2.55 ns       │ 2.486 ns      │ 2.489 ns      │ 100     │ 1000000000

WorldSEnder

o/ Sorry that it took so long to merge this. Looks good to me, really like the error hint and docs.

In case anyone is curious later, this is special in yew basically because of type-safety. Arbitrary children of a <textarea /> are parsed as a string in html, but providing it as an attribute which is already stringly-typed doesn't require us to have different children types and parsing rules for different elements (which would also need to be namespace aware).

futursolo reviewed Oct 14, 2023

View reviewed changes

its-the-shrimp requested a review from futursolo October 19, 2023 16:31

futursolo reviewed Oct 22, 2023

View reviewed changes

futursolo reviewed Oct 23, 2023

View reviewed changes

packages/yew/src/virtual_dom/vtag.rs Outdated Show resolved Hide resolved

packages/yew/src/virtual_dom/vtag.rs Outdated Show resolved Hide resolved

futursolo reviewed Oct 28, 2023

View reviewed changes

packages/yew/tests/hydration.rs Show resolved Hide resolved

packages/yew/tests/suspense.rs Show resolved Hide resolved

its-the-shrimp added 10 commits February 15, 2025 15:00

made <textarea> a void element

160891c

updated docs, fixed formatting

4603d0a

fixed hydration test

a752ddb

fixed heading in docs

41b7d77

fixed suspense test

169a6d5

fixed hydration tests again

bf49af6

added defaultvalue special attr to <textarea>

a4d4732

fix docs formatting

c822baa

fixed clippy warnings

2755763

updated error message when trying to pass children to textarea

ca26817

its-the-shrimp added 8 commits February 15, 2025 15:00

fixes to error messages and formatting

d265f00

fixed formatting

325e804

fixed formatting

b2e5283

fixed SSR, added SSR test for precedence of value over defaultvalue

b08de88

fixed hydration test

4980ee2

fixed hydration test

e2fdab4

fixed hydration test

fdeb968

fixed HTML formatting

1a51ed3

its-the-shrimp force-pushed the textarea2void branch from 28d4cec to 1a51ed3 Compare February 16, 2025 16:44

clippy & fmt fixes

41fff43

its-the-shrimp force-pushed the textarea2void branch from f1c78da to 41fff43 Compare February 16, 2025 17:20

fixing wasm-bindgen-test screwups & replacing deprecated function use

99f56b2

its-the-shrimp force-pushed the textarea2void branch from a57a267 to 99f56b2 Compare February 16, 2025 19:37

WorldSEnder enabled auto-merge (squash) February 20, 2025 18:06

WorldSEnder approved these changes Feb 20, 2025

View reviewed changes

WorldSEnder merged commit 0091679 into yewstack:master Feb 20, 2025
26 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make `<textarea>` a void element #3465

Make `<textarea>` a void element #3465

its-the-shrimp commented Oct 13, 2023 •

edited

Loading

github-actions bot commented Oct 13, 2023 •

edited

Loading

github-actions bot commented Oct 13, 2023 •

edited

Loading

github-actions bot commented Oct 13, 2023 •

edited

Loading

ranile commented Oct 13, 2023

its-the-shrimp commented Oct 13, 2023

ranile commented Oct 13, 2023

its-the-shrimp commented Oct 13, 2023

its-the-shrimp commented Oct 13, 2023

ranile commented Oct 13, 2023

its-the-shrimp commented Oct 13, 2023

ranile commented Oct 13, 2023

its-the-shrimp commented Oct 13, 2023 •

edited

Loading

futursolo commented Oct 14, 2023 •

edited

Loading

futursolo Oct 14, 2023 •

edited

Loading

its-the-shrimp Oct 14, 2023

futursolo Oct 15, 2023 •

edited

Loading

its-the-shrimp Oct 15, 2023

futursolo Oct 15, 2023 •

edited

Loading

ranile Oct 22, 2023

futursolo Oct 21, 2023

its-the-shrimp Oct 22, 2023

futursolo Oct 23, 2023

futursolo Oct 23, 2023

ranile Oct 23, 2023

futursolo Oct 23, 2023

its-the-shrimp commented Oct 22, 2023

futursolo left a comment

futursolo left a comment

its-the-shrimp commented Nov 11, 2024

github-actions bot commented Feb 16, 2025 •

edited

Loading

WorldSEnder left a comment

	<textarea ~defaultValue="default value"></textarea>
	<textarea defaultvalue="default value" />

	assert_eq!(s, r#"<textarea value="teststring"></textarea>"#);
	assert_eq!(s, r#"<textarea>teststring</textarea>"#);

Make <textarea> a void element #3465

Make <textarea> a void element #3465

Conversation

its-the-shrimp commented Oct 13, 2023 • edited Loading

Description

Checklist

github-actions bot commented Oct 13, 2023 • edited Loading

github-actions bot commented Oct 13, 2023 • edited Loading

Size Comparison

github-actions bot commented Oct 13, 2023 • edited Loading

Benchmark - SSR

Yew Master

Pull Request

ranile commented Oct 13, 2023

its-the-shrimp commented Oct 13, 2023

ranile commented Oct 13, 2023

its-the-shrimp commented Oct 13, 2023

its-the-shrimp commented Oct 13, 2023

ranile commented Oct 13, 2023

its-the-shrimp commented Oct 13, 2023

ranile commented Oct 13, 2023

its-the-shrimp commented Oct 13, 2023 • edited Loading

futursolo commented Oct 14, 2023 • edited Loading

futursolo Oct 14, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

futursolo Oct 15, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

futursolo Oct 15, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

its-the-shrimp commented Oct 22, 2023

futursolo left a comment

Choose a reason for hiding this comment

futursolo left a comment

Choose a reason for hiding this comment

its-the-shrimp commented Nov 11, 2024

github-actions bot commented Feb 16, 2025 • edited Loading

Benchmark - core

Yew Master

Pull Request

WorldSEnder left a comment

Choose a reason for hiding this comment

Make `<textarea>` a void element #3465

Make `<textarea>` a void element #3465

its-the-shrimp commented Oct 13, 2023 •

edited

Loading

github-actions bot commented Oct 13, 2023 •

edited

Loading

github-actions bot commented Oct 13, 2023 •

edited

Loading

github-actions bot commented Oct 13, 2023 •

edited

Loading

its-the-shrimp commented Oct 13, 2023 •

edited

Loading

futursolo commented Oct 14, 2023 •

edited

Loading

futursolo Oct 14, 2023 •

edited

Loading

futursolo Oct 15, 2023 •

edited

Loading

futursolo Oct 15, 2023 •

edited

Loading

github-actions bot commented Feb 16, 2025 •

edited

Loading