Merge pull request #18921 from unoplatform/dev/xygu/20241125/wasm-poi…

…nterdown-over-selection-2

fix(wasm): unwanted preview shown when dragging over existing selection

src/SamplesApp/UITests.Shared/UITests.Shared.projitems

@@ -1102,6 +1102,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>
@@ -6353,6 +6357,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>

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>

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();
+	}
+}

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() {