Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
xeleoss opened this issue Sep 7, 2022 · 5 comments
Closed

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

xeleoss opened this issue Sep 7, 2022 · 5 comments

Comments

@xeleoss
Copy link

xeleoss commented Sep 7, 2022

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:
image

System Info

No response

Any additional comments?

No response

@edison1105
Copy link
Member

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.

@xeleoss
Copy link
Author

xeleoss commented Sep 8, 2022

@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.
image

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

@xeleoss
Copy link
Author

xeleoss commented Sep 13, 2022

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 LinusBorg reopened this Sep 13, 2022
@LinusBorg
Copy link
Member

LinusBorg commented Sep 13, 2022

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

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.

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
Copy link
Member

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'

chrislone pushed a commit to chrislone/core that referenced this issue Feb 4, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants