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.

Sign up for GitHub

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

Jump to bottom

Failed to set the 'size' property on 'HTMLInputElement': The value provided is 0, which is an invalid size. #3294

Closed
SnirShechter opened this issue Feb 24, 2021 · 6 comments
Closed

Failed to set the 'size' property on 'HTMLInputElement': The value provided is 0, which is an invalid size. #3294

SnirShechter opened this issue Feb 24, 2021 · 6 comments
Labels
need more info Further information is requested

Comments

@SnirShechter
Copy link

Version

3.0.5

Reproduction link

I have no idea how to reproduce without the full, actual repo.

Steps to reproduce

No idea, but seems like it has something to do with patchDOMProp setting el[key] = 0

What is expected?

To work normally

What is actually happening?

An error is thrown and nothing happens

The warning:

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next
at <AppInput class="name-input" modelValue="" onUpdate:modelValue=fn >
at <ModelGuideAddModel key="Add Model" setup= {step: 1, substep: 1, modelName: "", modelId: "", modelDescription: "", …} onUpdate:setup=fn ... >
at <BaseTransition mode="out-in" appear=false persisted=false ... >
at
at <AddModelDialog class="dialog overflow-auto" onError=fn onSuccess=fn ... >
at <BaseTransition appear=true persisted=false onBeforeEnter=fn ... >
at
at
at

The error:

runtime-dom.esm-bundler.js?830f:212 Uncaught (in promise) DOMException: Failed to set the 'size' property on 'HTMLInputElement': The value provided is 0, which is an invalid size.
at patchDOMProp (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:423:21)
at patchProp (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:552:17)
at mountElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3927:25)
at processElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3899:13)
at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3819:21)
at mountChildren (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3995:13)
at mountElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3918:17)
at processElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3899:13)
at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3819:21)
at mountChildren (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3995:13)
patchDOMProp @ runtime-dom.esm-bundler.js?830f:212
patchProp @ runtime-dom.esm-bundler.js?830f:341
mountElement @ runtime-core.esm-bundler.js?5c40:3826
processElement @ runtime-core.esm-bundler.js?5c40:3789
patch @ runtime-core.esm-bundler.js?5c40:3709
mountChildren @ runtime-core.esm-bundler.js?5c40:3894
mountElement @ runtime-core.esm-bundler.js?5c40:3817
processElement @ runtime-core.esm-bundler.js?5c40:3789
patch @ runtime-core.esm-bundler.js?5c40:3709
mountChildren @ runtime-core.esm-bundler.js?5c40:3894
mountElement @ runtime-core.esm-bundler.js?5c40:3817
processElement @ runtime-core.esm-bundler.js?5c40:3789
patch @ runtime-core.esm-bundler.js?5c40:3709
mountChildren @ runtime-core.esm-bundler.js?5c40:3894
mountElement @ runtime-core.esm-bundler.js?5c40:3817
processElement @ runtime-core.esm-bundler.js?5c40:3789
patch @ runtime-core.esm-bundler.js?5c40:3709
componentEffect @ runtime-core.esm-bundler.js?5c40:4211
reactiveEffect @ reactivity.esm-bundler.js?a1e9:42
effect @ reactivity.esm-bundler.js?a1e9:17
setupRenderEffect @ runtime-core.esm-bundler.js?5c40:4176
mountComponent @ runtime-core.esm-bundler.js?5c40:4134
processComponent @ runtime-core.esm-bundler.js?5c40:4094
patch @ runtime-core.esm-bundler.js?5c40:3712
mountChildren @ runtime-core.esm-bundler.js?5c40:3894
mountElement @ runtime-core.esm-bundler.js?5c40:3817
processElement @ runtime-core.esm-bundler.js?5c40:3789
patch @ runtime-core.esm-bundler.js?5c40:3709
mountChildren @ runtime-core.esm-bundler.js?5c40:3894
mountElement @ runtime-core.esm-bundler.js?5c40:3817
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js?5c40:264
queueJob @ runtime-core.esm-bundler.js?5c40:258
run @ reactivity.esm-bundler.js?a1e9:183
trigger @ reactivity.esm-bundler.js?a1e9:189
set @ reactivity.esm-bundler.js?a1e9:288
arrayInstrumentations. @ reactivity.esm-bundler.js?a1e9:222
open @ dialogerInstance.ts?1943:32
_callee5$ @ Models.vue?20b7:140
tryCatch @ runtime.js?96cf:63
invoke @ runtime.js?96cf:293
eval @ runtime.js?96cf:118
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
openAddModelDialog @ Models.vue?20b7:140
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:163
emit @ runtime-core.esm-bundler.js?5c40:620
Object.onClick._cache.._cache. @ ListView.vue?3c87:6
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:163
emit @ runtime-core.esm-bundler.js?5c40:620
Object.onClick._cache.._cache. @ BasicButton.vue?98a1:5
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:163
invoker @ runtime-dom.esm-bundler.js?830f:301
Show 76 more frames
@LinusBorg
Copy link
Member

An absolute minimum would be to share the code of the AppInput component as that's where the error happens.

@LinusBorg LinusBorg added the need more info Further information is requested label Feb 24, 2021
@posva
Copy link
Member

posva commented Feb 24, 2021

Please read https://new-issue.vuejs.org/?repo=vuejs/vue-next#why-repro and open a new issue with a reproduction.

Remember to use the forum or the Discord chat to ask questions!

@posva posva closed this as completed Feb 24, 2021
@edison1105
Copy link
Member

edison1105 commented Feb 24, 2021 •
edited
Loading

the size value must be greater than 0, you should check your code to avoid this.
see https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#attr-size

@SnirShechter
Copy link
Author

@LinusBorg
@posva

Hey, I just worked out to reproduce the issue.

@edison1105 is correct. The problem is a template of <input :size="0">. However, this did not cause an issue in Vue 2.

I think the minimum is removing the Vue warning that says "open an issue" in this case. WDYT?

@edison1105
Copy link
Member

this did not cause an issue in Vue 2.

because we used el.setAttribute(key,value) in Vue 2 and changed to el[key] = value in Vue 3.
I think this is expected.you should avoid to set <input :size="0">

@LinusBorg
Copy link
Member

We could consider a better warning when setting element attributes, as the scheduler error that's thrown makes it appear to be something different, maybe.

@edison1105 edison1105 mentioned this issue Apr 9, 2021
Closed
@github-actions github-actions bot locked and limited conversation to collaborators Oct 25, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
need more info Further information is requested
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@posva @LinusBorg @edison1105 @SnirShechter