fix: fix the bug with render class ant-upload-drag-container in dom #6413
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Hello!
I have searched the issues of this repository and believe that this is not a duplicate.
Version
3.2.16
Environment
ant-design-vue 3.2.16;
vue-3.2.0
Reproduction link
https://codesandbox.io/s/a-upload-dragger-class-issue-nzg0v9?file=/src/App.vue
Steps to reproduce
There is an incorrect rendering of the class "ant-upload-drag-container" in DOM. If we use an empty tag
<a-upload-dragger></a-upload-dragger>
, the empty<div>
with class"[object Object]-drag-container"
renders in DOM.This happens because of an error in string 397 of the Upload.tsx file.
<div class={
${prefixCls}-drag-container}>{slots.default?.()}</div>
prefixCls - ComputedRef, not a string.
To fix this issue, we can modify the code to access the string value of the prefixCls object -
prefixCls.value
My suggestion:
<div class={
${prefixCls.value}-drag-container}>{slots.default?.()}</div>
What is expected?
The class "ant-upload-dragger-container" should be rendered in DOM
What is actually happening?
The class "[object Object]-drag-container" renders in DOM