fixes #862

docs/resources/changelog.md

@@ -11,6 +11,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 ## Next
 
 - Fixed a bug in `<sl-tree>` where dynamically changing slotted items wouldn't update the tree properly
+- Fixed a bug in `<sl-split-panel>` that caused the panel to stack when clicking on the divider in mobile versions of Chrome [#862](https://github.com/shoelace-style/shoelace/issues/862)
 - Improved single selection in `<sl-tree>` so nodes expand and collapse and receive selection when clicking on the label
 - Renamed `expanded-icon` and `collapsed-icon` slots to `expand-icon` and `collapse-icon` in the experimental `<sl-tree>` and `<sl-tree-item>` components
 - Improved RTL support for `<sl-image-comparer>`

src/components/split-panel/split-panel.ts

@@ -110,7 +110,9 @@ export default class SlSplitPanel extends ShoelaceElement {
     }
 
     // Prevent text selection when dragging
-    event.preventDefault();
+    if (event.cancelable) {
+      event.preventDefault();
+    }
 
     drag(this, {
       onMove: (x, y) => {

src/internal/drag.ts

@@ -38,7 +38,7 @@ export function drag(container: HTMLElement, options?: Partial<DragOptions>) {
   document.addEventListener('pointerup', stop);
 
   // If an initial event is set, trigger the first drag immediately
-  if (options?.initialEvent) {
+  if (options?.initialEvent?.type === 'pointermove') {
     move(options.initialEvent);
   }
 }