diff --git a/packages/blocks/src/root-block/widgets/drag-handle/watchers/drag-event-watcher.ts b/packages/blocks/src/root-block/widgets/drag-handle/watchers/drag-event-watcher.ts
index c0b2ef5fe89a..13d7a51099d9 100644
--- a/packages/blocks/src/root-block/widgets/drag-handle/watchers/drag-event-watcher.ts
+++ b/packages/blocks/src/root-block/widgets/drag-handle/watchers/drag-event-watcher.ts
@@ -423,6 +423,8 @@ export class DragEventWatcher {
 
     if (blocksExcludingChildren.length === 0) return false;
 
+    console.log(blocks);
+    console.log(blocksExcludingChildren);
     this._startDragging(blocksExcludingChildren, state);
     this.widget.hide();
     return true;
diff --git a/packages/blocks/src/root-block/widgets/drag-handle/watchers/handle-event-watcher.ts b/packages/blocks/src/root-block/widgets/drag-handle/watchers/handle-event-watcher.ts
index 77c32995f733..afb9bcb1cfc9 100644
--- a/packages/blocks/src/root-block/widgets/drag-handle/watchers/handle-event-watcher.ts
+++ b/packages/blocks/src/root-block/widgets/drag-handle/watchers/handle-event-watcher.ts
@@ -7,8 +7,7 @@ import {
 } from '../config.js';
 
 export class HandleEventWatcher {
-  private _onDragHandlePointerDown = (event: PointerEvent) => {
-    event.stopPropagation();
+  private _onDragHandlePointerDown = () => {
     if (!this.widget.isHoverDragHandleVisible || !this.widget.anchorBlockId)
       return;
 
diff --git a/packages/blocks/src/root-block/widgets/drag-handle/watchers/pointer-event-watcher.ts b/packages/blocks/src/root-block/widgets/drag-handle/watchers/pointer-event-watcher.ts
index 9abf251a9a59..ff2b9226f820 100644
--- a/packages/blocks/src/root-block/widgets/drag-handle/watchers/pointer-event-watcher.ts
+++ b/packages/blocks/src/root-block/widgets/drag-handle/watchers/pointer-event-watcher.ts
@@ -46,6 +46,50 @@ export class PointerEventWatcher {
     );
   };
 
+  /**
+   * When click on drag handle
+   * Should select the block and show slash menu if current block is not selected
+   * Should clear selection if current block is the first selected block
+   */
+  private _clickHandler: UIEventHandler = ctx => {
+    if (!this.widget.isHoverDragHandleVisible) return;
+
+    const state = ctx.get('pointerState');
+    const { target } = state.raw;
+    const element = captureEventTarget(target);
+    const insideDragHandle = !!element?.closest(AFFINE_DRAG_HANDLE_WIDGET);
+    if (!insideDragHandle) return;
+
+    const anchorBlockId = this.widget.anchorBlockId.peek();
+
+    if (!anchorBlockId) return;
+
+    const { selection } = this.widget.std;
+    const selectedBlocks = this.widget.selectionHelper.selectedBlocks;
+
+    // Should clear selection if current block is the first selected block
+    if (
+      selectedBlocks.length > 0 &&
+      !includeTextSelection(selectedBlocks) &&
+      selectedBlocks[0].blockId === anchorBlockId
+    ) {
+      selection.clear(['block']);
+      this.widget.dragHoverRect = null;
+      this.showDragHandleOnHoverBlock();
+      return;
+    }
+
+    // Should select the block if current block is not selected
+    const block = this.widget.anchorBlockComponent.peek();
+    if (!block) return;
+
+    if (selectedBlocks.length > 1) {
+      this.showDragHandleOnHoverBlock();
+    }
+
+    this.widget.selectionHelper.setSelectedBlocks([block]);
+  };
+
   private _containerStyle = computed(() => {
     const draggingAreaRect = this.widget.draggingAreaRect.value;
     if (!draggingAreaRect) return null;
@@ -104,37 +148,6 @@ export class PointerEventWatcher {
 
   private _lastShowedBlock: { id: string; el: BlockComponent } | null = null;
 
-  private _onClick = () => {
-    const anchorBlockId = this.widget.anchorBlockId.peek();
-
-    if (!anchorBlockId) return;
-
-    const { selection } = this.widget.std;
-    const selectedBlocks = this.widget.selectionHelper.selectedBlocks;
-
-    // Should clear selection if current block is the first selected block
-    if (
-      selectedBlocks.length > 0 &&
-      !includeTextSelection(selectedBlocks) &&
-      selectedBlocks[0].blockId === anchorBlockId
-    ) {
-      selection.clear(['block']);
-      this.widget.dragHoverRect = null;
-      this.showDragHandleOnHoverBlock();
-      return;
-    }
-
-    // Should select the block if current block is not selected
-    const block = this.widget.anchorBlockComponent.peek();
-    if (!block) return;
-
-    if (selectedBlocks.length > 1) {
-      this.showDragHandleOnHoverBlock();
-    }
-
-    this.widget.selectionHelper.setSelectedBlocks([block]);
-  };
-
   /**
    * When pointer move on block, should show drag handle
    * And update hover block id and path
@@ -317,19 +330,7 @@ export class PointerEventWatcher {
   }
 
   watch() {
-    // this.widget.disposables.addFromEvent(this.widget, 'pointerdown', e => {
-    //   e.stopPropagation();
-    //   return true;
-    // });
-
-    requestAnimationFrame(() => {
-      this.widget.disposables.addFromEvent(
-        this.widget.dragHandleContainer,
-        'click',
-        this._onClick
-      );
-    });
-    // this.widget.handleEvent('click', this._clickHandler);
+    this.widget.handleEvent('click', this._clickHandler);
     this.widget.handleEvent('pointerMove', this._throttledPointerMoveHandler);
     this.widget.handleEvent('pointerOut', this._pointerOutHandler);
   }
diff --git a/tests/playwright.config.ts b/tests/playwright.config.ts
index be46b186bd45..728b25ad5bba 100644
--- a/tests/playwright.config.ts
+++ b/tests/playwright.config.ts
@@ -1,10 +1,11 @@
 import type { PlaywrightWorkerOptions } from '@playwright/test';
 
 import { defineConfig } from '@playwright/test';
+import process from 'node:process';
 
 export default defineConfig({
   testDir: '.',
-  timeout: 40000,
+  timeout: process.env.CI ? 40000 : 999999,
   fullyParallel: true,
   snapshotDir: 'snapshots',
   snapshotPathTemplate: 'snapshots/{testFilePath}/{arg}{ext}',