Input component causes warning: "Failed setting prop "size" on <input>: value 0 is invalid" #5509
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
Version
3.1.0
Environment
ant-design-vue@3.1.1, vue@3.2.33
Reproduction link
Steps to reproduce
- Follow "Getting Started" steps to create
antd-demofrom antdv.com - Paste the 1st code example from antdv.com - components - form into App.vue or any SFC
<template>
<a-form
:model="formState"
name="basic"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 16 }"
autocomplete="off"
@finish="onFinish"
@finishFailed="onFinishFailed"
>
<a-form-item
label="Username"
name="username"
:rules="[{ required: true, message: 'Please input your username!' }]"
>
<a-input v-model:value="formState.username" />
</a-form-item>
<a-form-item
label="Password"
name="password"
:rules="[{ required: true, message: 'Please input your password!' }]"
>
<a-input-password v-model:value="formState.password" />
</a-form-item>
<a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
<a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-button type="primary" html-type="submit">Submit</a-button>
</a-form-item>
</a-form>
</template>
<script>
import { defineComponent, reactive } from 'vue';
export default defineComponent({
setup() {
const formState = reactive({
username: '',
password: '',
remember: true,
});
const onFinish = values => {
console.log('Success:', values);
};
const onFinishFailed = errorInfo => {
console.log('Failed:', errorInfo);
};
return {
formState,
onFinish,
onFinishFailed,
};
},
});
</script>- Check console for warning:
[Vue warn]: Failed setting prop "size" on <input>: value 0 is invalid.
Error: Failed to set the 'size' property on 'HTMLInputElement': The value provided is 0, which is an invalid size.
- Downgrading to
ant-design-vue@2.2.8will remove console warning
What is expected?
Input component should work without warning.
What is actually happening?
[Vue warn]: Failed setting prop "size" on <input>: value 0 is invalid.
Error: Failed to set the 'size' property on 'HTMLInputElement': The value provided is 0, which is an invalid size.
Warning only occurs with <a-input>. In the case of textarea (from here), <a-input v-model:value="formState.desc" type="textarea" /> will also produce console warning. Using <a-textarea> instead will not.
This occurs in any version > 3.0.