[Lens] fix selection when dragging (elastic#93034)

mbondyra · Mar 2, 2021 · b1a6a58 · b1a6a58
1 parent 30e4689
commit b1a6a58
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/x-pack/plugins/lens/public/drag_drop/drag_drop.test.tsx b/x-pack/plugins/lens/public/drag_drop/drag_drop.test.tsx
@@ -76,6 +76,20 @@ describe('DragDrop', () => {
     expect(preventDefault).not.toBeCalled();
   });
 
+  test('removes selection on mouse down before dragging', async () => {
+    const removeAllRanges = jest.fn();
+    global.getSelection = jest.fn(() => (({ removeAllRanges } as unknown) as Selection));
+    const component = mount(
+      <DragDrop value={value} draggable={true} order={[2, 0, 1, 0]}>
+        <button>Hi!</button>
+      </DragDrop>
+    );
+
+    component.find('[data-test-subj="lnsDragDrop"]').simulate('mousedown');
+    expect(global.getSelection).toBeCalled();
+    expect(removeAllRanges).toBeCalled();
+  });
+
   test('dragstart sets dragging in the context and calls it with proper params', async () => {
     const setDragging = jest.fn();
 

diff --git a/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx b/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx
@@ -202,6 +202,13 @@ export const DragDrop = (props: BaseProps) => {
   return <DropInner {...dropProps} />;
 };
 
+const removeSelectionBeforeDragging = () => {
+  const selection = window.getSelection();
+  if (selection) {
+    selection.removeAllRanges();
+  }
+};
+
 const DragInner = memo(function DragInner({
   dataTestSubj,
   className,
@@ -366,6 +373,7 @@ const DragInner = memo(function DragInner({
         draggable: true,
         onDragEnd: dragEnd,
         onDragStart: dragStart,
+        onMouseDown: removeSelectionBeforeDragging,
       })}
     </div>
   );