fix(grid): fix target error in shadow dom

packages/utils/src/event/index.ts

@@ -58,7 +58,7 @@ export const getActualTarget = (e) => {
   if (!e || !e.target) {
     return null
   }
-  return e.target.shadowRoot && e.composed ? e.composedPath()[0] || e.target : e.target
+  return e.target?.shadowRoot && e.composed ? e.composedPath()[0] || e.target : e.target
 }
 
 export const correctTarget = (event, target?: EventTarget) => {

packages/vue/src/grid/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-grid",
   "type": "module",
-  "version": "3.25.0",
+  "version": "3.25.1",
   "description": "",
   "license": "MIT",
   "sideEffects": false,
@@ -12,6 +12,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
+    "@opentiny/utils": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-directive": "workspace:~",
     "@opentiny/vue-dropdown": "workspace:~",
@@ -26,8 +27,7 @@
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-tag": "workspace:~",
     "@opentiny/vue-theme": "workspace:~",
-    "@opentiny/vue-tooltip": "workspace:~",
-    "@opentiny/utils": "workspace:~"
+    "@opentiny/vue-tooltip": "workspace:~"
   },
   "devDependencies": {
     "@opentiny-internal/vue-test-utils": "workspace:*",

packages/vue/src/grid/src/keyboard/src/methods.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  *
  */
-import { addClass, removeClass } from '@opentiny/utils'
+import { addClass, removeClass, getActualTarget } from '@opentiny/utils'
 import { arrayEach, arrayIndexOf, findTree, find } from '@opentiny/vue-renderless/grid/static/'
 import { getCellValue, setCellValue, getCell, getRowNodes, getCellNodeIndex } from '@opentiny/vue-renderless/grid/utils'
 import { extend } from '@opentiny/utils'
@@ -667,12 +667,13 @@ export default {
     const { $grid, $refs, autoClearMouseChecked, autoClearKeyboardCopy } = this
     const { tableWrapper, tooltip, validTip } = $refs
     const equalOrContain = (elm, target) => elm && (elm === target || elm.contains(target))
+    const actualTarget = getActualTarget(event)
 
     if (
-      !equalOrContain($grid.$el, event.target) &&
-      !equalOrContain(tableWrapper, event.target) &&
-      !equalOrContain(tooltip && tooltip.state.popperElm, event.target) &&
-      !equalOrContain(validTip && validTip.state.popperElm, event.target)
+      !equalOrContain($grid.$el, actualTarget) &&
+      !equalOrContain(tableWrapper, actualTarget) &&
+      !equalOrContain(tooltip && tooltip.state.popperElm, actualTarget) &&
+      !equalOrContain(validTip && validTip.state.popperElm, actualTarget)
     ) {
       if (autoClearMouseChecked) {
         this.clearChecked()

packages/vue/src/grid/src/table/src/methods.ts

@@ -23,7 +23,7 @@
  *
  */
 import { getColumnList, assemColumn, repairFixed } from '@opentiny/vue-renderless/grid/utils'
-import { toDecimal } from '@opentiny/utils'
+import { toDecimal, getActualTarget } from '@opentiny/utils'
 import { addClass, removeClass } from '@opentiny/utils'
 import { isNull } from '@opentiny/utils'
 import { debounce } from '@opentiny/utils'
@@ -1213,7 +1213,7 @@ const Methods = {
           blurClass = blurClassConfig.slice(0)
         }
 
-        if (args?.cell.contains(event.target)) {
+        if (args?.cell.contains(getActualTarget(event))) {
           return true
         }
         if (editConfig.mode === 'row' && getEventTargetNode(event, $el, 'tiny-grid-body__column').flag) {
@@ -1625,7 +1625,7 @@ const Methods = {
         const { scrollHeight, bodyHeight } = this.scrollLoadStore
         const { currentPage, pageSize } = this.$grid.tablePage
         const max = scrollHeight - bodyHeight
-        let scrollTop = event.target.scrollTop
+        let scrollTop = getActualTarget(event).scrollTop
 
         if (scrollTop > max) {
           scrollTop = max
@@ -1649,7 +1649,7 @@ const Methods = {
     const { startIndex, renderSize, offsetSize, visibleIndex, visibleSize, rowHeight } = scrollYStore
 
     // 动态获取容器的scrollTop，这里有可能会造成卡顿，暂时没有好的方案
-    let { scrollTop } = event.target
+    let { scrollTop } = getActualTarget(event)
     let toVisibleIndex = Math.ceil(scrollTop / rowHeight)
     let preload = false
     if (visibleIndex === toVisibleIndex) {
@@ -1748,7 +1748,7 @@ const Methods = {
   updateScrollLoadBar(event) {
     const { $el, elemStore, scrollLoad, scrollLoadStore } = this
 
-    if (scrollLoad && $el.contains(event.target)) {
+    if (scrollLoad && $el.contains(getActualTarget(event))) {
       const wheelDelta = event.wheelDelta ? event.wheelDelta : -event.detail * 40
       const scrollElm = elemStore['main-body-ySpace']
       const { scrollHeight, bodyHeight } = scrollLoadStore

packages/vue/src/grid/src/table/src/utils/handleGlobalMousedownEvent.ts

@@ -22,6 +22,8 @@
  * SOFTWARE.
  *
  */
+import { getActualTarget } from '@opentiny/utils'
+
 export function handleGlobalMousedownOnFilterWrapper({ $el, _vm, event, filterStore, filterWrapper }) {
   if (filterWrapper) {
     if (_vm.getEventTargetNode(event, $el, 'tiny-grid-filter-wrapper').flag) {
@@ -77,12 +79,13 @@ export function handleGlobalIsClear({ $el, _vm, actived, editConfig, event, isCl
 
 export function handleGlobalClearActived({ $el, _vm, event, isClear }) {
   const tableContent = _vm.$refs.tableBody?.$refs.table
+  const actualTarget = getActualTarget(event)
   // 如果点击了当前表格之外
   if (
     isClear ||
     !_vm.getEventTargetNode(event, $el).flag ||
-    (_vm.$refs.tableHeader && _vm.$refs.tableHeader.$el.contains(event.target)) ||
-    (tableContent && !tableContent.contains(event.target))
+    (_vm.$refs.tableHeader && _vm.$refs.tableHeader.$el.contains(actualTarget)) ||
+    (tableContent && !tableContent.contains(actualTarget))
   ) {
     setTimeout(() => _vm.clearActived(event))
   }