Fix/scrollbar (#1123)

* fix(select):  fix select scrollbar bug

* fix(table): fix table filter pane scroll bug

* fix(cascader): fix cascader pane scroll bug

Co-authored-by: bastarder <jie.qian@blockheaders.com>

packages/cascader/src/index.vue

@@ -2,10 +2,11 @@
   <el-popper
     ref="popper"
     v-model:visible="popperVisible"
-    trigger="manual"
+    manual-mode
     placement="bottom-start"
     :popper-class="`el-cascader__dropdown ${popperClass}`"
     :popper-options="popperOptions"
+    :stop-popper-mouse-event="false"
     transition="el-zoom-in-top"
     :gpu-acceleration="false"
     effect="light"
@@ -14,7 +15,7 @@
   >
     <template #trigger>
       <div
-        v-clickoutside="() => togglePopperVisible(false)"
+        v-clickoutside:[popperPaneRef]="() => togglePopperVisible(false)"
         :class="[
           'el-cascader',
           realSize && `el-cascader--${realSize}`,
@@ -303,6 +304,10 @@ export default defineComponent({
       },
     })
 
+    const popperPaneRef = computed(() => {
+      return popper.value?.popperRef
+    })
+
     const togglePopperVisible = (visible?: boolean) => {
       if (isDisabled.value) return
 
@@ -539,6 +544,7 @@ export default defineComponent({
     return {
       popperOptions,
       popper,
+      popperPaneRef,
       input,
       tagWrapper,
       panel,

packages/select/src/select.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="selectWrapper"
-    v-clickOutside="handleClose"
+    v-click-outside:[popperPaneRef]="handleClose"
     class="el-select"
     :class="[selectSize ? 'el-select--' + selectSize : '']"
     @click.stop="toggleMenu"
@@ -17,6 +17,7 @@
       pure
       trigger="click"
       transition="el-zoom-in-top"
+      :stop-popper-mouse-event="false"
       :gpu-acceleration="false"
       @before-enter="handleMenuEnter"
     >
@@ -171,6 +172,7 @@ import {
   nextTick,
   reactive,
   provide,
+  computed,
 } from 'vue'
 import ElInput from '@element-plus/input'
 import ElOption from './option.vue'
@@ -377,6 +379,10 @@ export default defineComponent({
       ctx.emit(UPDATE_MODEL_EVENT, '')
     }
 
+    const popperPaneRef = computed(() => {
+      return popper.value?.popperRef
+    })
+
     return {
       selectSize,
       readonly,
@@ -430,6 +436,7 @@ export default defineComponent({
       reference,
       input,
       popper,
+      popperPaneRef,
       tags,
       selectWrapper,
       scrollbar,

packages/table/src/filter-panel.vue

@@ -5,9 +5,10 @@
     :offset="0"
     :placement="placement"
     :show-arrow="false"
-    trigger="click"
+    :stop-popper-mouse-event="false"
     effect="light"
     pure
+    manual-mode
     popper-class="el-table-filter"
     append-to-body
   >
@@ -67,6 +68,7 @@
     </template>
     <template #trigger>
       <span
+        v-click-outside:[popperPaneRef]="hideFilterPanel"
         class="el-table__column-filter-trigger el-none-outline"
         @click="showFilterPanel"
       >
@@ -96,6 +98,7 @@ import { t } from '@element-plus/locale'
 import ElCheckbox from '@element-plus/checkbox'
 import ElCheckboxGroup from '@element-plus/checkbox-group'
 import ElScrollbar from '@element-plus/scrollbar'
+import { ClickOutside } from '@element-plus/directives'
 
 import { Store, TableColumnCtx, TableHeader } from './table.type'
 
@@ -107,6 +110,7 @@ export default defineComponent({
     ElScrollbar,
     ElPopper,
   },
+  directives: { ClickOutside },
   props: {
     placement: {
       type: String,
@@ -129,6 +133,7 @@ export default defineComponent({
       parent.filterPanels.value[props.column.id] = instance
     }
     const tooltipVisible = ref(false)
+    const tooltip = ref(null)
     const filters = computed(() => {
       return props.column && props.column.filters
     })
@@ -171,7 +176,10 @@ export default defineComponent({
     }
     const showFilterPanel = (e: MouseEvent) => {
       e.stopPropagation()
-      tooltipVisible.value = true
+      tooltipVisible.value = !tooltipVisible.value
+    }
+    const hideFilterPanel = () => {
+      tooltipVisible.value = false
     }
     const handleConfirm = () => {
       confirmFilter(filteredValue.value)
@@ -210,6 +218,11 @@ export default defineComponent({
         immediate: true,
       },
     )
+
+    const popperPaneRef = computed(() => {
+      return tooltip.value?.popperRef
+    })
+
     return {
       tooltipVisible,
       multiple,
@@ -222,6 +235,9 @@ export default defineComponent({
       isActive,
       t,
       showFilterPanel,
+      hideFilterPanel,
+      popperPaneRef,
+      tooltip,
     }
   },
 })