chore: Drag should not trigger selection (#1009)

* fix: drag should not select content * test: add test case
react-component · Jul 18, 2024 · 784e2bb · 784e2bb
1 parent 75bec0a
commit 784e2bb
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 0 deletions.
diff --git a/docs/examples/editable.tsx b/docs/examples/editable.tsx
@@ -41,6 +41,8 @@ export default () => {
           }}
         />
       </div>
+
+      <p>Here is a word that drag should not select it</p>
     </div>
   );
 };
diff --git a/src/hooks/useDrag.ts b/src/hooks/useDrag.ts
@@ -108,6 +108,7 @@ function useDrag(
 
   const onStartMove: OnStartMove = (e, valueIndex, startValues?: number[]) => {
     e.stopPropagation();
+    e.preventDefault();
 
     // 如果是点击 track 触发的，需要传入变化后的初始值，而不能直接用 rawValues
     const initialValues = startValues || rawValues;

diff --git a/tests/Range.test.tsx b/tests/Range.test.tsx
@@ -30,13 +30,19 @@ describe('Range', () => {
     const mouseDown = createEvent.mouseDown(ele);
     (mouseDown as any).pageX = start;
     (mouseDown as any).pageY = start;
+
+    const preventDefault = jest.fn();
+
     Object.defineProperties(mouseDown, {
       clientX: { get: () => start },
       clientY: { get: () => start },
+      preventDefault: { value: preventDefault },
     });
 
     fireEvent.mouseEnter(ele);
     fireEvent(ele, mouseDown);
+
+    expect(preventDefault).toHaveBeenCalled();
   }
 
   function doMouseMove(
-Original file line number
+Diff line change
@@ Expand Up / @@ -41,6 +41,8 @@ export default () => { @@
               }}
             />
           </div>
+          <p>Here is a word that drag should not select it</p>
         </div>
       );
     };