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

src/Uno.UI/Extensions/UIElementExtensions.wasm.cs

@@ -1,4 +1,6 @@
-using Microsoft.UI.Xaml;
+using System.Globalization;
+using Microsoft.UI.Xaml;
+using __Windows.ApplicationModel.DataTransfer.DragDrop.Core;
 
 namespace Uno.UI.Extensions
 {
@@ -25,5 +27,15 @@ internal static FrameworkElement GetTopLevelParent(this UIElement view)
 
 			return current;
 		}
+
+		/// <summary>
+		/// Block native 'dragstart' with preventDefault().
+		/// </summary>
+		/// <param name="uie"></param>
+		/// <remarks>This is used to prevent default browser drag-preview when dragging from this control with existing selection.</remarks>
+		public static void PreventNativeDragStart(this UIElement uie)
+		{
+			DragDropExtension.NativeMethods.PreventDragStart(uie.HtmlId.ToString(CultureInfo.InvariantCulture));
+		}
 	}
 }

src/Uno.UI/UI/Xaml/Controls/Primitives/Thumb.mux.cs

@@ -9,6 +9,7 @@
 using Microsoft.UI.Xaml.Input;
 using Microsoft.UI.Xaml.Media;
 using Uno.UI.Xaml.Core;
+using Uno.UI.Extensions;
 
 namespace Microsoft.UI.Xaml.Controls.Primitives;
 
@@ -36,6 +37,10 @@ public Thumb()
 		// TODO Uno specific:
 		DefaultStyleKey = typeof(Thumb);
 
+#if HAS_UNO && __WASM__
+		this.PreventNativeDragStart(); // see remarks
+#endif
+
 		IgnoreTouchInput = false;
 		m_origin = Point.Zero;
 		m_previousPosition = Point.Zero;

src/Uno.UI/UI/Xaml/Controls/ScrollBar/ScrollBar.cs

@@ -8,6 +8,7 @@
 using Microsoft.UI.Xaml.Controls.Primitives;
 using Microsoft.UI.Xaml.Input;
 using DirectUI;
+using Uno.UI.Extensions;
 
 
 #if HAS_UNO_WINUI
@@ -132,6 +133,10 @@ void Initialize()
 		{
 			DefaultStyleKey = typeof(ScrollBar);
 
+#if HAS_UNO && __WASM__
+			this.PreventNativeDragStart(); // see remarks
+#endif
+
 			SizeChanged += OnSizeChanged;
 #if !UNO_HAS_ENHANCED_LIFECYCLE
 			LayoutUpdated += OnLayoutUpdated;

src/Uno.UI/UI/Xaml/Controls/Slider/Slider.mux.cs

@@ -21,6 +21,7 @@
 using Microsoft.UI.Xaml.Shapes;
 using static Microsoft/* UWP don't rename */.UI.Xaml.Controls._Tracing;
 using Uno.UI.Xaml.Core.Scaling;
+using Uno.UI.Extensions;
 
 namespace Microsoft.UI.Xaml.Controls;
 
@@ -48,6 +49,10 @@ public Slider()
 		PrepareState();
 
 #if HAS_UNO
+#if __WASM__
+		this.PreventNativeDragStart(); // see remarks
+#endif
+
 		// Uno specific: Detach and reattach template child events.
 		// Needed to avoid memory leaks on iOS.
 		Loaded += Slider_Loaded;

src/Uno.UI/UI/Xaml/DragDrop/DragDropExtension.Interop.wasm.cs

@@ -7,14 +7,19 @@ internal partial class DragDropExtension
 	{
 		internal static partial class NativeMethods
 		{
-			[JSImport("globalThis.Windows.ApplicationModel.DataTransfer.DragDrop.Core.DragDropExtension.registerNoOp")]
+			private const string JsType = "globalThis.Windows.ApplicationModel.DataTransfer.DragDrop.Core.DragDropExtension";
+
+			[JSImport($"{JsType}.registerNoOp")]
 			internal static partial void RegisterNoOp();
 
-			[JSImport("globalThis.Windows.ApplicationModel.DataTransfer.DragDrop.Core.DragDropExtension.retrieveFiles")]
+			[JSImport($"{JsType}.retrieveFiles")]
 			internal static partial Task<string> RetrieveFilesAsync(int[] itemIds);
 
-			[JSImport("globalThis.Windows.ApplicationModel.DataTransfer.DragDrop.Core.DragDropExtension.retrieveText")]
+			[JSImport($"{JsType}.retrieveText")]
 			internal static partial Task<string> RetrieveTextAsync(int itemId);
+
+			[JSImport($"{JsType}.preventDragStart")]
+			internal static partial void PreventDragStart(string htmlId);
 		}
 	}
 }

src/Uno.UI/ts/Windows/ApplicationModel/DataTransfer/DragAndDropExtension.ts

@@ -41,6 +41,16 @@
 			DragDropExtension._dispatchDragDropArgs = null;
 		}
 
+		public static preventDragStart(htmlId: string): void {
+			const element = document.getElementById(htmlId);
+			if (element != null) {
+				// #18854: Prevent the browser default selection drag preview.
+				// Typically used for controls that uses press - and - hold - drag gesture(pointer based),
+				// like Thumb, Slider, ScrollBar, where the drag-preview should not occur.
+				element.addEventListener('dragstart', e => e.preventDefault());
+			}
+		}
+
 		constructor() {
 			// Events fired on the drop target
 			// Note: dragenter and dragover events will enable drop on the app