Failed setting prop "size" on <input>: value 0 is invalid.

[ivanmem]

Vue version

3.2.38

Link to minimal reproduction

https://codesandbox.io/s/peaceful-fermat-f8l7q1?file=/src/InputComponent.vue

Steps to reproduce

1. Create a component for input.
2. Add the option to specify :size via props.
3. Use a component and don't specify size.

What is expected?

No warning.

What is actually happening?

Warning:

System Info

No response

Any additional comments?

No response

[edison1105]

see https://html.spec.whatwg.org/multipage/input.html#the-size-attribute

The size attribute, if specified, must have a value that is a valid non-negative integer greater than zero.

[ivanmem]

@edison1105 What does "if it is specified" have to do with it? Vue doesn't allow you to not specify a size.
I want not to specify size. This attribute is optional! A warning in the console is bothering me.

Behavior when:
<input>
and with:
<input :size="undefined"
It should be the same.

[ivanmem]

I see that the default value for the size is 20.
Is it really necessary to set the default value props: {size: {default: 20}} and see it in the html, even if it is not specified when using the component?
Can vue developers make it so that when trying to specify an undefined value, it is not set at all? So that there is no error and there is no size in the html?

[LinusBorg]

@edison1105 I reopened because I think we have some room for optimization here:

core/packages/runtime-dom/src/modules/props.ts

Lines 96 to 107 in 8772a01

	try {
	el[key] = value
	} catch (e: any) {
	if (__DEV__) {
	warn(
	`Failed setting prop "${key}" on <${el.tagName.toLowerCase()}>: ` +
	`value ${value} is invalid.`,
	e
	)
	}
	}
	needRemove && el.removeAttribute(key)

This is the place that throws the warning. it does throw because it tries to do el.size = undefined, which will result in the size attribute being reflected as size="0", and an erroir being throws because undefined is not accepted as a value.

I think we can rewrite it like this?

if (needRemove) {
  el.removeAttribute(key)
}
else {
  try {
    el[key] = value
  } catch (e: any) {
    if (__DEV__) {
      warn(
        `Failed setting prop "${key}" on <${el.tagName.toLowerCase()}>: ` +
          `value ${value} is invalid.`,
        e
      )
    }
  }
}

However I'm not sure if the code as it is now was done to cover some other scenario.

Also, I think we need a fix here - needRemove is not bein set for cases where value null or undefined here.

core/packages/runtime-dom/src/modules/props.ts

Lines 55 to 69 in 8772a01

	if (value === '' || value == null) {
	const type = typeof el[key]
	if (type === 'boolean') {
	// e.g. <select multiple> compiles to { multiple: '' }
	value = includeBooleanAttr(value)
	} else if (value == null && type === 'string') {
	// e.g. <div :id="null">
	value = ''
	needRemove = true
	} else if (type === 'number') {
	// e.g. <img :width="null">
	// the value of some IDL attr must be greater than 0, e.g. input.size = 0 -> error
	value = 0
	needRemove = true
	}

Again, not sure of the side effects from the top of my head.

[LinusBorg]

Looking at it again, this issue is even mentioned here in the comment in line 66.

But I guess it does not work like intended because the type check is a bit all over the place:

• typeof input.max // => 'string'
• typeof input.size // => 'number'
• typeof img.size // => 'undefined'