From fa64999032f20ab75be632646664619400851946 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Fri, 19 Mar 2021 16:32:36 +0800
Subject: [PATCH] Image: fix z-index and keydown event add stopPropagation
 (#20859)

---
 packages/image/src/image-viewer.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/image/src/image-viewer.vue b/packages/image/src/image-viewer.vue
index dc5d13867..63c85dade 100644
--- a/packages/image/src/image-viewer.vue
+++ b/packages/image/src/image-viewer.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="viewer-fade">
-    <div tabindex="-1" ref="el-image-viewer__wrapper" class="el-image-viewer__wrapper" :style="{ 'z-index': zIndex }">
+    <div tabindex="-1" ref="el-image-viewer__wrapper" class="el-image-viewer__wrapper" :style="{ 'z-index': viewerZIndex }">
       <div class="el-image-viewer__mask" @click.self="handleMaskClick"></div>
       <!-- CLOSE -->
       <span class="el-image-viewer__btn el-image-viewer__close" @click="hide">
@@ -54,6 +54,7 @@
 <script>
 import { on, off } from 'element-ui/src/utils/dom';
 import { rafThrottle, isFirefox } from 'element-ui/src/utils/util';
+import { PopupManager } from 'element-ui/src/utils/popup';
 
 const Mode = {
   CONTAIN: {
@@ -143,6 +144,10 @@ export default {
         style.maxWidth = style.maxHeight = '100%';
       }
       return style;
+    },
+    viewerZIndex() {
+      const nextZIndex = PopupManager.nextZIndex();
+      return this.zIndex > nextZIndex ? this.zIndex : nextZIndex;
     }
   },
   watch: {
@@ -167,7 +172,8 @@ export default {
       this.onClose();
     },
     deviceSupportInstall() {
-      this._keyDownHandler = rafThrottle(e => {
+      this._keyDownHandler = e => {
+        e.stopPropagation();
         const keyCode = e.keyCode;
         switch (keyCode) {
           // ESC
@@ -195,7 +201,7 @@ export default {
             this.handleActions('zoomOut');
             break;
         }
-      });
+      };
       this._mouseWheelHandler = rafThrottle(e => {
         const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
         if (delta > 0) {