From 6521dbb42aa3eb8df2d9bbdad7fe7df25db289a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A5=98=ED=95=9C=EA=B2=BD?= <hangyeong.ryu@gmail.com>
Date: Mon, 16 May 2022 21:58:25 +0900
Subject: [PATCH] fix(components): [upload] show close tip text (#7696)

---
 packages/components/upload/src/upload-list.vue |  6 +-----
 packages/theme-chalk/src/upload.scss           | 10 ++++++----
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/components/upload/src/upload-list.vue b/packages/components/upload/src/upload-list.vue
index 5c17aed01e..df21907274 100644
--- a/packages/components/upload/src/upload-list.vue
+++ b/packages/components/upload/src/upload-list.vue
@@ -20,7 +20,7 @@
       @keydown.delete="!disabled && handleRemove(file)"
       @focus="focusing = true"
       @blur="focusing = false"
-      @click="onFileClicked"
+      @click="focusing = false"
     >
       <slot :file="file">
         <img
@@ -142,10 +142,6 @@ const handleClick = (file: UploadFile) => {
   props.handlePreview(file)
 }
 
-const onFileClicked = (e: Event) => {
-  ;(e.target as HTMLElement).focus()
-}
-
 const handleRemove = (file: UploadFile) => {
   emit('remove', file)
 }
diff --git a/packages/theme-chalk/src/upload.scss b/packages/theme-chalk/src/upload.scss
index 851afae5ff..ae4b3c86fe 100644
--- a/packages/theme-chalk/src/upload.scss
+++ b/packages/theme-chalk/src/upload.scss
@@ -195,12 +195,13 @@
     & .#{bem('icon', '', 'close-tip')} {
       display: none;
       position: absolute;
+      top: 1px;
       right: 5px;
       font-size: 12px;
       cursor: pointer;
       opacity: 1;
       color: getCssVar('color-primary');
-      transform: translateY(-50%);
+      font-style: normal;
     }
 
     &:hover {
@@ -236,7 +237,7 @@
 
       &:focus:not(:hover) {
         /* 键盘focus */
-        .#{$namespace}-icon-close-tip {
+        .#{bem('icon', '', 'close-tip')} {
           display: inline-block;
         }
       }
@@ -245,12 +246,13 @@
       &:active {
         /* click时 */
         outline-width: 0;
-        .#{$namespace}-icon--close-tip {
+        .#{bem('icon', '', 'close-tip')} {
           display: none;
         }
       }
 
-      &:hover {
+      &:hover,
+      &:focus {
         .#{bem('upload-list', 'item-status-label')} {
           display: none;
           opacity: 0;