[Table] fix editable-cell can not exit (#2055)

* fix(table): editable-cell can not exit * fix(hooks useresizeobserver): add comment; remove neccessary warn * fix: remove useless params e
Tencent · Jan 29, 2023 · ece3013 · ece3013
1 parent b8b45b8
commit ece3013
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 30 deletions.
diff --git a/src/hooks/useResizeObserver.ts b/src/hooks/useResizeObserver.ts
@@ -1,27 +1,39 @@
-import { Ref, onMounted, onBeforeUnmount } from '@vue/composition-api';
+import { Ref, watch, onBeforeUnmount } from '@vue/composition-api';
 
 export default function useResizeObserver(
   container: Ref<HTMLElement>,
-  callback: (data: [ResizeObserverEntry]) => void,
+  callback: (data: ResizeObserverEntry[]) => void,
 ) {
+  const isSupport = window && window.ResizeObserver;
+  // unit tests do not need any warn console; too many warns influence focusing on more important log info
+  if (!isSupport) return;
+
   let containerObserver: ResizeObserver = null;
 
-  const observeContainer = () => {
-    if (!container || !container.value || !window || !window.ResizeObserver) {
-      containerObserver?.unobserve(container.value);
-      containerObserver?.disconnect();
-    } else {
-      containerObserver = new ResizeObserver(callback);
-      containerObserver.observe(container.value);
-    }
+  const cleanupObserver = () => {
+    if (!containerObserver) return;
+    containerObserver.unobserve(container.value);
+    containerObserver.disconnect();
+    containerObserver = null;
   };
 
-  onMounted(() => {
-    observeContainer();
-  });
+  const addObserver = (el: HTMLElement) => {
+    containerObserver = new ResizeObserver(callback);
+    containerObserver.observe(el);
+  };
+
+  if (container) {
+    watch(
+      container,
+      (el) => {
+        cleanupObserver();
+        el && addObserver(el);
+      },
+      { immediate: true, flush: 'post' },
+    );
+  }
 
   onBeforeUnmount(() => {
-    containerObserver?.unobserve(container.value);
-    containerObserver?.disconnect();
+    cleanupObserver();
   });
 }
diff --git a/src/table/editable-cell.tsx b/src/table/editable-cell.tsx
@@ -248,19 +248,9 @@ export default defineComponent({
       }
     };
 
-    const documentClickHandler = (e: PointerEvent) => {
+    const documentClickHandler = () => {
       if (!col.value.edit || !col.value.edit.component) return;
       if (!isEdit.value) return;
-      // @ts-ignore
-      if (e.path?.includes(tableEditableCellRef.value?.$el)) return;
-      // @ts-ignore 如果点击到 Popup 复层也直接返回
-      for (let i = 0, len = e.path.length; i < len; i++) {
-        // @ts-ignore
-        const node = e.path[i];
-        if (node.classList?.value?.includes('popup__content')) {
-          return;
-        }
-      }
       const outsideAbortEvent = col.value.edit.onEdited;
       updateAndSaveAbort(outsideAbortEvent, {
         ...cellParams.value,
@@ -296,10 +286,6 @@ export default defineComponent({
     watch(
       cellValue,
       (cellValue) => {
-        // let val = cellValue;
-        // if (typeof val === 'object' && val !== null) {
-        //   val = val instanceof Array ? [...val] : { ...val };
-        // }
         editValue.value = cellValue;
       },
       { immediate: true },