From fbf34667a6b618667974789a8825577633db487c Mon Sep 17 00:00:00 2001
From: Mike Saprykin <mikesaprykin@gmail.com>
Date: Sun, 11 Apr 2021 15:58:25 +0300
Subject: [PATCH] fix(time-picker): added popperRef in picker to Fix issue
 #1809 (#1812)

Added usage of popperRef arg in clickoutside directive in picker to fix issue #1809

fix ##1809
---
 packages/time-picker/src/common/picker.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/time-picker/src/common/picker.vue b/packages/time-picker/src/common/picker.vue
index ee0cd7683a..31eba5d59a 100644
--- a/packages/time-picker/src/common/picker.vue
+++ b/packages/time-picker/src/common/picker.vue
@@ -18,7 +18,7 @@
     <template #trigger>
       <el-input
         v-if="!isRangeInput"
-        v-clickoutside="onClickOutside"
+        v-clickoutside:[popperPaneRef]="onClickOutside"
         :model-value="displayValue"
         :name="name"
         :size="pickerSize"
@@ -53,7 +53,7 @@
       </el-input>
       <div
         v-else
-        v-clickoutside="onClickOutside"
+        v-clickoutside:[popperPaneRef]="onClickOutside"
         class="el-date-editor el-range-editor el-input__inner"
         :class="[
           'el-date-editor--' + type,
@@ -347,6 +347,11 @@ export default defineComponent({
     const pickerSize = computed(() => {
       return props.size || elFormItem.size || ELEMENT.size
     })
+
+    const popperPaneRef = computed(() => {
+      return refPopper.value?.popperRef
+    })
+
     const onClickOutside = () => {
       if (!pickerVisible.value) return
       pickerVisible.value = false
@@ -496,6 +501,7 @@ export default defineComponent({
       onUserInput,
       handleChange,
       handleKeydown,
+      popperPaneRef,
       onClickOutside,
       pickerSize,
       isRangeInput,