[pull] develop from RocketChat:develop

.changeset/rich-pets-sparkle.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/ui-voip": patch
+---
+
+Fixes select not closing when dragging the new call widget

packages/ui-voip/src/hooks/VoipPopupDraggable/DraggableCore.ts

@@ -352,12 +352,15 @@ class HandleDomElement
 	implements IHandleElement
 {
 	public setElement(element: HTMLElement) {
+		// Prevent text selection in the handle and behind the widget
+		element.style.userSelect = 'none';
+		element.style.webkitUserSelect = 'none';
+
 		const onGrab = (event: PointerEvent) => {
 			const element = event.currentTarget as HTMLElement;
 			if (!element || (isMousePointer(event) && !isLeftClick(event))) {
 				return;
 			}
-			event.preventDefault();
 
 			this.emit('grab', [getPointerEventCoordinates(event), element.getBoundingClientRect()]);
 		};

packages/ui-voip/src/hooks/VoipPopupDraggable/useDraggable.stories.tsx

@@ -55,7 +55,10 @@ const DraggableElement = ({
 			backgroundColor={backgroundColor ?? 'blue'}
 			data-testid='draggable-box'
 		>
-			<Box ref={handleRef} id='drag-handle' width='100%' height={40} backgroundColor='red' data-testid='drag-handle' />
+			{/* This text inside the handle is necessary so that the text selection test doesn't fail due to having no text nodes */}
+			<Box ref={handleRef} id='drag-handle' width='100%' height={40} backgroundColor='red' data-testid='drag-handle'>
+				Handle
+			</Box>
 			{!!onClick && (
 				<Button data-testid='change-view' onClick={onClick}>
 					Change view
@@ -494,6 +497,13 @@ export const ScrollablePage: Story = {
 			const startX = handleRect.left + handleRect.width / 2;
 			const startY = handleRect.top + handleRect.height / 2;
 
+			// Caveat: We use "user-select: none" to prevent text selection behind the widget
+			// but when simulating mouse events with `userEvent`, the text selection is triggered
+			// regardless of the "user-select: none" property
+			// This most likely happens because the events are simulated and not a real mouse interaction
+			// This means we cannot test the text behind the widget, but we can test if the text inside the handle was selected
+			// During manual tests, either both texts (inside and behind the widget) are selected or neither is selected
+			// So this test should cover the issue even though it's not a perfect solution
 			await user.pointer([
 				{
 					target: handle,
@@ -504,10 +514,9 @@ export const ScrollablePage: Story = {
 					},
 				},
 				{
-					// we need to set offset and target to trigger text selection
-					// if target or offset is not set, the issue doesn't happen
-					// I believe this is due to events being simulated and not exact mouse interaction
-					target: document.documentElement,
+					// we need to set offset to trigger text selection
+					// this is what makes testing difficult, as setting the offset and target to "document.documentElement"
+					// always triggers text selection, regardless of the css styles
 					offset: 0,
 					pointerName: 'mouse',
 					coords: {

packages/ui-voip/src/views/MediaCallWidget/__snapshots__/MediaCallWidget.spec.tsx.snap

@@ -13,6 +13,7 @@ exports[`renders IncomingCall without crashing 1`] = `
     >
       <div
         class="rcx-box rcx-box--full rcx-css-1aw4sw4 rcx-css-11m6c1h"
+        style="user-select: none; webkit-user-select: none;"
       >
         <i
           aria-hidden="true"
@@ -170,6 +171,7 @@ exports[`renders IncomingCallTransfer without crashing 1`] = `
     >
       <div
         class="rcx-box rcx-box--full rcx-css-1aw4sw4 rcx-css-11m6c1h"
+        style="user-select: none; webkit-user-select: none;"
       >
         <i
           aria-hidden="true"
@@ -364,6 +366,7 @@ exports[`renders NewCall without crashing 1`] = `
     >
       <div
         class="rcx-box rcx-box--full rcx-css-1aw4sw4 rcx-css-11m6c1h"
+        style="user-select: none; webkit-user-select: none;"
       >
         <i
           aria-hidden="true"
@@ -560,6 +563,7 @@ exports[`renders OngoingCall without crashing 1`] = `
     >
       <div
         class="rcx-box rcx-box--full rcx-css-1aw4sw4 rcx-css-11m6c1h"
+        style="user-select: none; webkit-user-select: none;"
       >
         <i
           aria-hidden="true"
@@ -759,6 +763,7 @@ exports[`renders OutgoingCall without crashing 1`] = `
     >
       <div
         class="rcx-box rcx-box--full rcx-css-1aw4sw4 rcx-css-11m6c1h"
+        style="user-select: none; webkit-user-select: none;"
       >
         <i
           aria-hidden="true"
@@ -899,6 +904,7 @@ exports[`renders OutgoingCallTransfer without crashing 1`] = `
     >
       <div
         class="rcx-box rcx-box--full rcx-css-1aw4sw4 rcx-css-11m6c1h"
+        style="user-select: none; webkit-user-select: none;"
       >
         <i
           aria-hidden="true"