fix: switch off user select on drag and drop

development/issues/closed/184.html

@@ -15,7 +15,7 @@
     <li><a href="/">Back to overview</a></li>
 </ul>
 <main>
-    <monster-panel id="panel" style="border: 9px solid yellow;display: block">
+    <monster-panel id="panel" style="border: 9px solid yellow;display: block;">
         <div style="background: red">
             <monster-panel style="border: 10px solid blue" id="inner" data-monster-option-heightadjustment="5">
                 sdfsdfsdf<br>asfdasdfasd<br>

source/components/form/select.mjs

@@ -2614,63 +2614,63 @@ function initEventHandler() {
 
     const types = self.getOption("toggleEventType", ["click"]);
 
-    for (const [, type] of Object.entries(types)) {
-        self[controlElementSymbol]
-            .querySelector(`[${ATTRIBUTE_ROLE}="container"]`)
-            .addEventListener(type, function (event) {
-                const element = findTargetElementFromEvent(
-                    event,
-                    ATTRIBUTE_ROLE,
-                    "remove-badge",
-                );
-                if (element instanceof HTMLElement) {
-                    return;
-                }
+        for (const [, type] of Object.entries(types)) {
+            self[controlElementSymbol]
+                .querySelector(`[${ATTRIBUTE_ROLE}="container"]`)
+                .addEventListener(type, function (event) {
+                    const element = findTargetElementFromEvent(
+                        event,
+                        ATTRIBUTE_ROLE,
+                        "remove-badge",
+                    );
+                    if (element instanceof HTMLElement) {
+                        return;
+                    }
 
-                toggle.call(self);
-            });
+                    toggle.call(self);
+                });
 
-        self[controlElementSymbol]
-            .querySelector(`[${ATTRIBUTE_ROLE}="status-or-remove-badges"]`)
-            .addEventListener(type, function (event) {
-                if (self.getOption("disabled", undefined) === true) {
-                    return;
-                }
+            self[controlElementSymbol]
+                .querySelector(`[${ATTRIBUTE_ROLE}="status-or-remove-badges"]`)
+                .addEventListener(type, function (event) {
+                    if (self.getOption("disabled", undefined) === true) {
+                        return;
+                    }
 
-                const path = event.composedPath();
-                const element = path?.[0];
-                if (element instanceof HTMLElement) {
-                    const control = element.closest(
-                        `[${ATTRIBUTE_ROLE}="status-or-remove-badges"]`,
-                    );
-                    if (control instanceof HTMLElement) {
-                        if (control.classList.contains("clear")) {
-                            clearSelection.call(self);
-
-                            fireCustomEvent(self, "monster-selection-cleared", {});
-                        } else {
-                            const element = findTargetElementFromEvent(
-                                event,
-                                ATTRIBUTE_ROLE,
-                                "remove-badge",
-                            );
-                            if (element instanceof HTMLElement) {
-                                return;
+                    const path = event.composedPath();
+                    const element = path?.[0];
+                    if (element instanceof HTMLElement) {
+                        const control = element.closest(
+                            `[${ATTRIBUTE_ROLE}="status-or-remove-badges"]`,
+                        );
+                        if (control instanceof HTMLElement) {
+                            if (control.classList.contains("clear")) {
+                                clearSelection.call(self);
+
+                                fireCustomEvent(self, "monster-selection-cleared", {});
+                            } else {
+                                const element = findTargetElementFromEvent(
+                                    event,
+                                    ATTRIBUTE_ROLE,
+                                    "remove-badge",
+                                );
+                                if (element instanceof HTMLElement) {
+                                    return;
+                                }
+
+                                toggle.call(self);
                             }
-
-                            toggle.call(self);
                         }
                     }
-                }
-            });
+                });
 
-        // badge, selection
-        self.addEventListener(type, self[clearOptionEventHandler]);
-    }
+            // badge, selection
+            self.addEventListener(type, self[clearOptionEventHandler]);
+        }
 
-    self.addEventListener("monster-change", self[changeEventHandler]);
-    self.addEventListener("input", self[inputEventHandler]);
-    self.addEventListener("keydown", self[keyEventHandler]);
+        self.addEventListener("monster-change", self[changeEventHandler]);
+        self.addEventListener("input", self[inputEventHandler]);
+        self.addEventListener("keydown", self[keyEventHandler]);
 
     return self;
 }

source/components/layout/panel.mjs

@@ -84,7 +84,7 @@ class Panel extends CustomElement {
 
 	/**
 	 *
-	 * @return {Monster.Components.Host.Viewer}
+	 * @return {Panel}
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();

source/components/layout/split-panel.mjs

@@ -23,6 +23,7 @@ import { Observer } from "../../types/observer.mjs";
 import { SplitPanelStyleSheet } from "./stylesheet/split-panel.mjs";
 import { instanceSymbol } from "../../constants.mjs";
 import { internalSymbol } from "../../constants.mjs";
+import {getDocument} from "../../dom/util.mjs";
 
 export { SplitPanel, TYPE_VERTICAL, TYPE_HORIZONTAL };
 
@@ -69,6 +70,8 @@ const TYPE_HORIZONTAL = "horizontal";
  *
  * @fragments /fragments/components/layout/split-panel/
  *
+ * @issue https://localhost.alvine.dev:8440/development/issues/closed/184.html
+ *
  * @example /examples/components/layout/split-panel-simple
  *
  * @since 3.54.0
@@ -294,6 +297,8 @@ function initEventHandler() {
 		});
 	}
 
+	let userSelectDefault = getDocument().body.style.userSelect;
+
 	this[draggerElementSymbol].addEventListener("mousedown", () => {
 		self[internalSymbol].getSubject().isDragging = true;
 
@@ -317,6 +322,8 @@ function initEventHandler() {
 				return;
 			}
 
+			getDocument().body.style.userSelect = "none";
+
 			if (self.getOption("splitType") === TYPE_HORIZONTAL) {
 				const containerOffsetTop = self[splitScreenElementSymbol].offsetTop;
 				const topPanel = self[startPanelElementSymbol];
@@ -370,6 +377,10 @@ function initEventHandler() {
 
 		const dragEventHandler = (e) => {
 			self[internalSymbol].getSubject().isDragging = false;
+
+
+			document.body.style.userSelect = userSelectDefault;
+
 			document.removeEventListener("mousemove", eventListener);
 			document.removeEventListener("mouseup", eventListener);
 		};