From 2436ac6c7eca2f2c905a940bc03c640da3f9e7bd Mon Sep 17 00:00:00 2001
From: xiaoy312 <xiaoyao312@gmail.com>
Date: Mon, 25 Nov 2024 20:01:36 -0500
Subject: [PATCH] fix(wasm): unwanted preview shown when dragging over existing
 selection

---
 .../UITests.Shared/UITests.Shared.projitems   |  7 ++++++
 .../DragAndDrop/DragDrop_Wasm_Selection.xaml  | 14 +++++++++++
 .../DragDrop_Wasm_Selection.xaml.cs           | 23 +++++++++++++++++++
 .../DataTransfer/DragAndDropExtension.ts      |  3 +++
 4 files changed, 47 insertions(+)
 create mode 100644 src/SamplesApp/UITests.Shared/Windows_UI_Xaml/DragAndDrop/DragDrop_Wasm_Selection.xaml
 create mode 100644 src/SamplesApp/UITests.Shared/Windows_UI_Xaml/DragAndDrop/DragDrop_Wasm_Selection.xaml.cs

diff --git a/src/SamplesApp/UITests.Shared/UITests.Shared.projitems b/src/SamplesApp/UITests.Shared/UITests.Shared.projitems
index df5919797d12..937beb1d7f71 100644
--- a/src/SamplesApp/UITests.Shared/UITests.Shared.projitems
+++ b/src/SamplesApp/UITests.Shared/UITests.Shared.projitems
@@ -1098,6 +1098,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml\DragAndDrop\DragDrop_Wasm_Selection.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml\FocusManager\FocusManagerTest.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -6326,6 +6330,9 @@
     <Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml\DragAndDrop\DragDrop_TestPage.xaml.cs">
       <DependentUpon>DragDrop_TestPage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml\DragAndDrop\DragDrop_Wasm_Selection.xaml.cs">
+      <DependentUpon>DragDrop_Wasm_Selection.xaml</DependentUpon>
+    </Compile>
     <Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml\FocusManager\FocusManagerTest.xaml.cs">
       <DependentUpon>FocusManagerTest.xaml</DependentUpon>
     </Compile>
diff --git a/src/SamplesApp/UITests.Shared/Windows_UI_Xaml/DragAndDrop/DragDrop_Wasm_Selection.xaml b/src/SamplesApp/UITests.Shared/Windows_UI_Xaml/DragAndDrop/DragDrop_Wasm_Selection.xaml
new file mode 100644
index 000000000000..4479dc554e06
--- /dev/null
+++ b/src/SamplesApp/UITests.Shared/Windows_UI_Xaml/DragAndDrop/DragDrop_Wasm_Selection.xaml
@@ -0,0 +1,14 @@
+<UserControl x:Class="UITests.Windows_UI_Xaml.DragAndDrop.DragDrop_Wasm_Selection"
+			 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+			 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+	
+	<StackPanel Spacing="16">
+		<TextBlock Text="selectable text: // 1. select from HERE" IsTextSelectionEnabled="True" />
+
+		<!-- some controls that typically use drag gestures -->
+		<Slider />
+		<ScrollBar Orientation="Horizontal" IndicatorMode="MouseIndicator" />
+
+		<TextBlock Text="selectable text: // 2. to THERE" IsTextSelectionEnabled="True" />
+	</StackPanel>
+</UserControl>
diff --git a/src/SamplesApp/UITests.Shared/Windows_UI_Xaml/DragAndDrop/DragDrop_Wasm_Selection.xaml.cs b/src/SamplesApp/UITests.Shared/Windows_UI_Xaml/DragAndDrop/DragDrop_Wasm_Selection.xaml.cs
new file mode 100644
index 000000000000..17fd49f9c4cf
--- /dev/null
+++ b/src/SamplesApp/UITests.Shared/Windows_UI_Xaml/DragAndDrop/DragDrop_Wasm_Selection.xaml.cs
@@ -0,0 +1,23 @@
+using Microsoft.UI.Xaml.Controls;
+using Uno.UI.Samples.Controls;
+
+namespace UITests.Windows_UI_Xaml.DragAndDrop;
+
+#if __WASM__
+[Sample(
+	Description = PageDescription,
+	IsManualTest = true,
+	IgnoreInSnapshotTests = true)]
+#endif
+public sealed partial class DragDrop_Wasm_Selection : UserControl
+{
+	private const string PageDescription =
+		"This is wasm-only manual test verifying against #18854. " +
+		"While selection covers both TextBlocks, try to drag the thumb of the Slider and ScrollBar, " +
+		"there should be no drag preview."; // see linked issue for a gif of what should not happen.
+
+	public DragDrop_Wasm_Selection()
+	{
+		this.InitializeComponent();
+	}
+}
diff --git a/src/Uno.UI/ts/Windows/ApplicationModel/DataTransfer/DragAndDropExtension.ts b/src/Uno.UI/ts/Windows/ApplicationModel/DataTransfer/DragAndDropExtension.ts
index 422217207683..eb054d0e531a 100644
--- a/src/Uno.UI/ts/Windows/ApplicationModel/DataTransfer/DragAndDropExtension.ts
+++ b/src/Uno.UI/ts/Windows/ApplicationModel/DataTransfer/DragAndDropExtension.ts
@@ -55,6 +55,9 @@
 			//document.addEventListener("dragstart", this._dragHandler);
 			//document.addEventListener("drag", this._dragHandler);
 			//document.addEventListener("dragend", this._dragHandler);
+
+			// #18854: Prevent the browser default selection drag preview.
+			document.addEventListener('dragstart', e => e.preventDefault());
 		}
 
 		public dispose() {