React: Size prop is not attached to the DOM

[airamrguez]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

The size prop can only be a number and I think this should be true for inputs and selects but not necessarily true for the rest of HTML tags or web components.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

Sorry, it's a CodePen. This example uses a framework called OnsenUI that internally uses web components. In the OnsenUI framework there is an icon web component that transforms every size prop value into a string which is not attached to the DOM.

I know that the example has more dependencies than React, BUT there is also a simple div (as simple as this <div size="40px" />) which is also affected by this issue.

https://codepen.io/airamrguez/pen/bMEgEP

What is the expected behavior?

The size prop should be added to the DOM when it is not a number on HTML tags that aren't inputs and selects.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

The affected versions are >= 16.3
It works ok in versions <= 16.2
Browsers: All

[gaearon]

The size prop can only be a number and I think this should be true for inputs and selects but not necessarily true for the rest of HTML tags or web components.

What are the HTML tags that have a size attribute except inputs and selects?

With web components I am not seeing the issue:

https://jsfiddle.net/bpyx02yj/

[aweary]

@airamrguez the size attribute is an HTML attribute, not something that React provides. According to the HTML spec, size is only allowed on input and select elements

https://html.spec.whatwg.org/#attributes-3:attr-select-size

[airamrguez]

@gaearon I don't know why I wrote "rest of HTML tags", my bad 😅. The example you provided works ok, but if I add something that doesn't seems like a valid size then it doesn't work. For example:

Value | Works
-------|-------
100 | Yes
10px | No
10e1 | Yes
-1 | No

Something changed in 16.3.

Version 16.3
https://jsfiddle.net/sa30541v/

Version 16.2
https://jsfiddle.net/7umnLj0c/2/

@aweary I suppose that it's fine to filter props when not passing the appropriate values when using HTML tags but I suppose that in web components the size attribute can be anything. Am I wrong?

What do you think?

[gaearon]

The web component code path shouldn't reject any attributes. If it does it's a bug.

[gaearon]

The bug is here.
Before the switch we should add something like

if (isCustomComponentTag) {
  return false;
}

Please send a PR :-)

[airamrguez]

Ok, I will work on this tomorrow. I'm heading to bed. 🙏🏽Thanks for your quick response.

[airamrguez]

Couldn't wait

[gaearon]

Should be fixed in React 16.4.
https://reactjs.org/blog/2018/05/23/react-v-16-4.html