fix: 取消双击表格时浏览器默认的选中文本行为 close #2798 (#2800)

* fix: 取消双击表格时默认选中文本的默认浏览器行为 close #2798 * test: 更新快照
antvis · Jul 5, 2024 · 5df9326 · 5df9326
1 parent 3d89940
commit 5df9326
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/packages/s2-core/src/sheet-type/spread-sheet.ts b/packages/s2-core/src/sheet-type/spread-sheet.ts
@@ -744,15 +744,17 @@ export abstract class SpreadSheet extends EE {
       ...canvasConfig,
     });
 
-    this.updateContainerStyle();
+    this.setupContainerStyle();
   }
 
-  // canvas 需要设置为 块级元素, 不然和父元素有 5px 的高度差
-  protected updateContainerStyle() {
+  protected setupContainerStyle() {
     const canvas = this.getCanvasElement();
 
     if (canvas) {
+      // canvas 需要设置为块级元素, 不然和父元素有 5px 的高度差
       canvas.style.display = 'block';
+      // 避免双击 canvas 造成的外部文本选中
+      canvas.style.userSelect = 'none';
     }
   }
 

diff --git a/packages/s2-react/__tests__/unit/components/sheets/__snapshots__/index-spec.tsx.snap b/packages/s2-react/__tests__/unit/components/sheets/__snapshots__/index-spec.tsx.snap
@@ -96,7 +96,7 @@ exports[`<SheetComponent/> Tests Render Tests should render editable sheet by sn
         >
           <canvas
             height="400"
-            style="width: 200px; height: 200px; touch-action: none; display: block;"
+            style="width: 200px; height: 200px; touch-action: none; display: block; user-select: none;"
             width="400"
           />
         </div>
@@ -364,7 +364,7 @@ exports[`<SheetComponent/> Tests Render Tests should render gridAnalysis sheet b
         >
           <canvas
             height="400"
-            style="width: 200px; height: 200px; touch-action: none; display: block;"
+            style="width: 200px; height: 200px; touch-action: none; display: block; user-select: none;"
             width="400"
           />
         </div>
@@ -622,7 +622,7 @@ exports[`<SheetComponent/> Tests Render Tests should render pivot sheet by snaps
         >
           <canvas
             height="400"
-            style="width: 200px; height: 200px; touch-action: none; display: block;"
+            style="width: 200px; height: 200px; touch-action: none; display: block; user-select: none;"
             width="400"
           />
         </div>
@@ -880,7 +880,7 @@ exports[`<SheetComponent/> Tests Render Tests should render strategy sheet by sn
         >
           <canvas
             height="400"
-            style="width: 200px; height: 200px; touch-action: none; display: block;"
+            style="width: 200px; height: 200px; touch-action: none; display: block; user-select: none;"
             width="400"
           />
         </div>
@@ -1138,7 +1138,7 @@ exports[`<SheetComponent/> Tests Render Tests should render table sheet by snaps
         >
           <canvas
             height="400"
-            style="width: 200px; height: 200px; touch-action: none; display: block;"
+            style="width: 200px; height: 200px; touch-action: none; display: block; user-select: none;"
             width="400"
           />
         </div>

diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx
@@ -1586,6 +1586,7 @@ function MainLayout() {
                           onDataCellContextMenu={logHandler(
                             'onDataCellContextMenu',
                           )}
+                          onDoubleClick={logHandler('onDoubleClick')}
                         />
                       </React.StrictMode>
                     )}