From 5594aa456b3d212eb31e11722e42a1df6e71cd65 Mon Sep 17 00:00:00 2001
From: LenAnderson <Anderson.Len@outlook.com>
Date: Sat, 6 Jan 2024 18:21:08 +0000
Subject: [PATCH] fix jQuery sortable breaking select elements

---
 .../scripts/extensions/quick-reply/src/QuickReplySetLink.js | 2 ++
 public/scripts/extensions/quick-reply/src/ui/SettingsUi.js  | 1 +
 public/scripts/extensions/quick-reply/style.css             | 6 ++++++
 public/scripts/extensions/quick-reply/style.less            | 6 ++++++
 4 files changed, 15 insertions(+)

diff --git a/public/scripts/extensions/quick-reply/src/QuickReplySetLink.js b/public/scripts/extensions/quick-reply/src/QuickReplySetLink.js
index b95666962..4f7425525 100644
--- a/public/scripts/extensions/quick-reply/src/QuickReplySetLink.js
+++ b/public/scripts/extensions/quick-reply/src/QuickReplySetLink.js
@@ -39,6 +39,8 @@ export class QuickReplySetLink {
             }
             const set = document.createElement('select'); {
                 set.classList.add('qr--set');
+                // fix for jQuery sortable breaking childrens' touch events
+                set.addEventListener('touchstart', (evt)=>evt.stopPropagation());
                 set.addEventListener('change', ()=>{
                     this.set = QuickReplySet.get(set.value);
                     this.update();
diff --git a/public/scripts/extensions/quick-reply/src/ui/SettingsUi.js b/public/scripts/extensions/quick-reply/src/ui/SettingsUi.js
index 09e842ac9..9bd04b7a0 100644
--- a/public/scripts/extensions/quick-reply/src/ui/SettingsUi.js
+++ b/public/scripts/extensions/quick-reply/src/ui/SettingsUi.js
@@ -158,6 +158,7 @@ export class SettingsUi {
         // @ts-ignore
         $(qrsDom).sortable({
             delay: getSortableDelay(),
+            handle: '.drag-handle',
             stop: ()=>this.onQrListSort(),
         });
     }
diff --git a/public/scripts/extensions/quick-reply/style.css b/public/scripts/extensions/quick-reply/style.css
index e39f0fc7d..74bf8134f 100644
--- a/public/scripts/extensions/quick-reply/style.css
+++ b/public/scripts/extensions/quick-reply/style.css
@@ -156,6 +156,9 @@
   align-items: baseline;
   padding: 0 0.5em;
 }
+#qr--settings .qr--setList > .qr--item > .drag-handle {
+  padding: 0.75em;
+}
 #qr--settings .qr--setList > .qr--item > .qr--visible {
   flex: 0 0 auto;
   display: flex;
@@ -189,6 +192,9 @@
 #qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item > :nth-child(5) {
   flex: 0 0 auto;
 }
+#qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item > .drag-handle {
+  padding: 0.75em;
+}
 #qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item .qr--set-itemLabel,
 #qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item .qr--action {
   margin: 0;
diff --git a/public/scripts/extensions/quick-reply/style.less b/public/scripts/extensions/quick-reply/style.less
index 1f440ea67..e6271a2c0 100644
--- a/public/scripts/extensions/quick-reply/style.less
+++ b/public/scripts/extensions/quick-reply/style.less
@@ -174,6 +174,9 @@
 			gap: 0.5em;
 			align-items: baseline;
 			padding: 0 0.5em;
+			> .drag-handle {
+				padding: 0.75em;
+			}
 			> .qr--visible {
 				flex: 0 0 auto;
 				display: flex;
@@ -200,6 +203,9 @@
 				> :nth-child(3) { flex: 0 0 auto; }
 				> :nth-child(4) { flex: 1 1 75%; }
 				> :nth-child(5) { flex: 0 0 auto; }
+				> .drag-handle {
+					padding: 0.75em;
+				}
 				.qr--set-itemLabel, .qr--action {
 					margin: 0;
 				}