From 2a8313759a9c6125369697bbe8cf335214399df5 Mon Sep 17 00:00:00 2001
From: Jos de Jong <wjosdejong@gmail.com>
Date: Fri, 22 Dec 2023 10:09:41 +0100
Subject: [PATCH] fix: #379 ContextMenu not closing after using a custom button
 via onRenderContextMenu

---
 .../controls/contextmenu/ContextMenu.svelte   |  17 ++-
 .../contextmenu/ContextMenuButton.svelte      |   6 +-
 .../ContextMenuDropDownButton.svelte          |   6 +-
 .../contextmenu/TableContextMenu.svelte       |  98 +++------------
 .../contextmenu/TreeContextMenu.svelte        | 114 +++---------------
 5 files changed, 57 insertions(+), 184 deletions(-)

diff --git a/src/lib/components/controls/contextmenu/ContextMenu.svelte b/src/lib/components/controls/contextmenu/ContextMenu.svelte
index 8913dee9..02406512 100644
--- a/src/lib/components/controls/contextmenu/ContextMenu.svelte
+++ b/src/lib/components/controls/contextmenu/ContextMenu.svelte
@@ -19,6 +19,7 @@
   import ContextMenuDropDownButton from './ContextMenuDropDownButton.svelte'
 
   export let items: ContextMenuItem[]
+  export let onCloseContextMenu: () => void
   export let tip: string | undefined
 
   let refContextMenu: HTMLDivElement
@@ -79,23 +80,27 @@
 >
   {#each items as item}
     {#if isMenuButton(item)}
-      <ContextMenuButton {item} />
+      <ContextMenuButton {item} {onCloseContextMenu} />
     {:else if isMenuDropDownButton(item)}
-      <ContextMenuDropDownButton {item} />
+      <ContextMenuDropDownButton {item} {onCloseContextMenu} />
     {:else if isContextMenuRow(item)}
       <div class="jse-row">
         {#each item.items as rowItem}
           {#if isMenuButton(rowItem)}
-            <ContextMenuButton item={rowItem} />
+            <ContextMenuButton item={rowItem} {onCloseContextMenu} />
           {:else if isMenuDropDownButton(rowItem)}
-            <ContextMenuDropDownButton item={rowItem} />
+            <ContextMenuDropDownButton item={rowItem} {onCloseContextMenu} />
           {:else if isContextMenuColumn(rowItem)}
             <div class="jse-column">
               {#each rowItem.items as columnItem}
                 {#if isMenuButton(columnItem)}
-                  <ContextMenuButton className="left" item={columnItem} />
+                  <ContextMenuButton className="left" item={columnItem} {onCloseContextMenu} />
                 {:else if isMenuDropDownButton(columnItem)}
-                  <ContextMenuDropDownButton className="left" item={columnItem} />
+                  <ContextMenuDropDownButton
+                    className="left"
+                    item={columnItem}
+                    {onCloseContextMenu}
+                  />
                 {:else if isMenuSeparator(columnItem)}
                   <div class="jse-separator" />
                 {:else if isMenuLabel(columnItem)}
diff --git a/src/lib/components/controls/contextmenu/ContextMenuButton.svelte b/src/lib/components/controls/contextmenu/ContextMenuButton.svelte
index ab21f35f..2cdbe383 100644
--- a/src/lib/components/controls/contextmenu/ContextMenuButton.svelte
+++ b/src/lib/components/controls/contextmenu/ContextMenuButton.svelte
@@ -5,12 +5,16 @@
 
   export let item: MenuButton
   export let className: string | undefined = undefined
+  export let onCloseContextMenu: () => void
 </script>
 
 <button
   type="button"
   class={classnames('jse-context-menu-button', className, item.className)}
-  on:click={item.onClick}
+  on:click={(event) => {
+    onCloseContextMenu()
+    item.onClick(event)
+  }}
   title={item.title}
   disabled={item.disabled || false}
 >
diff --git a/src/lib/components/controls/contextmenu/ContextMenuDropDownButton.svelte b/src/lib/components/controls/contextmenu/ContextMenuDropDownButton.svelte
index e5cf924a..64a0ed17 100644
--- a/src/lib/components/controls/contextmenu/ContextMenuDropDownButton.svelte
+++ b/src/lib/components/controls/contextmenu/ContextMenuDropDownButton.svelte
@@ -6,6 +6,7 @@
 
   export let item: MenuDropDownButton
   export let className: string | undefined = undefined
+  export let onCloseContextMenu: () => void
 </script>
 
 <DropdownButton width={item.width} items={item.items}>
@@ -14,7 +15,10 @@
     type="button"
     slot="defaultItem"
     title={item.main.title}
-    on:click={item.main.onClick}
+    on:click={(event) => {
+      onCloseContextMenu()
+      item.main.onClick(event)
+    }}
     disabled={item.main.disabled || false}
   >
     {#if item.main.icon}
diff --git a/src/lib/components/modes/tablemode/contextmenu/TableContextMenu.svelte b/src/lib/components/modes/tablemode/contextmenu/TableContextMenu.svelte
index 8d8747b9..64ebefda 100644
--- a/src/lib/components/modes/tablemode/contextmenu/TableContextMenu.svelte
+++ b/src/lib/components/modes/tablemode/contextmenu/TableContextMenu.svelte
@@ -72,71 +72,6 @@
         )
       : false
 
-  function handleEditValue() {
-    onCloseContextMenu()
-    onEditValue()
-  }
-
-  function handleEditRow() {
-    onCloseContextMenu()
-    onEditRow()
-  }
-
-  function handleToggleEnforceString() {
-    onCloseContextMenu()
-    onToggleEnforceString()
-  }
-
-  function handleCut() {
-    onCloseContextMenu()
-    onCut(true)
-  }
-
-  function handleCutCompact() {
-    onCloseContextMenu()
-    onCut(false)
-  }
-
-  function handleCopy() {
-    onCloseContextMenu()
-    onCopy(true)
-  }
-
-  function handleCopyCompact() {
-    onCloseContextMenu()
-    onCopy(false)
-  }
-
-  function handlePaste() {
-    onCloseContextMenu()
-    onPaste()
-  }
-
-  function handleRemove() {
-    onCloseContextMenu()
-    onRemove()
-  }
-
-  function handleDuplicateRow() {
-    onCloseContextMenu()
-    onDuplicateRow()
-  }
-
-  function handleInsertBeforeRow() {
-    onCloseContextMenu()
-    onInsertBeforeRow()
-  }
-
-  function handleInsertAfterRow() {
-    onCloseContextMenu()
-    onInsertAfterRow()
-  }
-
-  function handleRemoveRow() {
-    onCloseContextMenu()
-    onRemoveRow()
-  }
-
   let defaultItems: ContextMenuItem[]
   $: defaultItems = [
     { type: 'separator' },
@@ -151,7 +86,7 @@
               type: 'dropdown-button',
               main: {
                 type: 'button',
-                onClick: handleEditValue,
+                onClick: () => onEditValue(),
                 icon: faPen,
                 text: 'Edit',
                 title: 'Edit the value (Double-click on the value)',
@@ -164,7 +99,7 @@
                   icon: faPen,
                   text: 'Edit',
                   title: 'Edit the value (Double-click on the value)',
-                  onClick: handleEditValue,
+                  onClick: () => onEditValue(),
                   disabled: !canEditValue
                 },
                 {
@@ -172,7 +107,7 @@
                   icon: enforceString ? faCheckSquare : faSquare,
                   text: 'Enforce string',
                   title: 'Enforce keeping the value as string when it contains a numeric value',
-                  onClick: handleToggleEnforceString,
+                  onClick: () => onToggleEnforceString(),
                   disabled: !canEnforceString
                 }
               ]
@@ -181,7 +116,7 @@
               type: 'dropdown-button',
               main: {
                 type: 'button',
-                onClick: handleCut,
+                onClick: () => onCut(true),
                 icon: faCut,
                 text: 'Cut',
                 title: 'Cut selected contents, formatted with indentation (Ctrl+X)',
@@ -194,7 +129,7 @@
                   icon: faCut,
                   text: 'Cut formatted',
                   title: 'Cut selected contents, formatted with indentation (Ctrl+X)',
-                  onClick: handleCut,
+                  onClick: () => onCut(true),
                   disabled: !hasSelectionContents
                 },
                 {
@@ -202,7 +137,7 @@
                   icon: faCut,
                   text: 'Cut compacted',
                   title: 'Cut selected contents, without indentation (Ctrl+Shift+X)',
-                  onClick: handleCutCompact,
+                  onClick: () => onCut(false),
                   disabled: !hasSelectionContents
                 }
               ]
@@ -211,7 +146,7 @@
               type: 'dropdown-button',
               main: {
                 type: 'button',
-                onClick: handleCopy,
+                onClick: () => onCopy(true),
                 icon: faCopy,
                 text: 'Copy',
                 title: 'Copy selected contents, formatted with indentation (Ctrl+C)',
@@ -224,7 +159,7 @@
                   icon: faCopy,
                   text: 'Copy formatted',
                   title: 'Copy selected contents, formatted with indentation (Ctrl+C)',
-                  onClick: handleCopy,
+                  onClick: () => onCopy(false),
                   disabled: !hasSelectionContents
                 },
                 {
@@ -232,14 +167,14 @@
                   icon: faCopy,
                   text: 'Copy compacted',
                   title: 'Copy selected contents, without indentation (Ctrl+Shift+C)',
-                  onClick: handleCopyCompact,
+                  onClick: () => onCopy(false),
                   disabled: !hasSelectionContents
                 }
               ]
             },
             {
               type: 'button',
-              onClick: handlePaste,
+              onClick: () => onPaste(),
               icon: faPaste,
               text: 'Paste',
               title: 'Paste clipboard contents (Ctrl+V)',
@@ -247,7 +182,7 @@
             },
             {
               type: 'button',
-              onClick: handleRemove,
+              onClick: () => onRemove(),
               icon: faTrashCan,
               text: 'Remove',
               title: 'Remove selected contents (Delete)',
@@ -261,7 +196,7 @@
             { type: 'label', text: 'Table row:' },
             {
               type: 'button',
-              onClick: handleEditRow,
+              onClick: () => onEditRow(),
               icon: faPen,
               text: 'Edit row',
               title: 'Edit the current row',
@@ -269,7 +204,7 @@
             },
             {
               type: 'button',
-              onClick: handleDuplicateRow,
+              onClick: () => onDuplicateRow(),
               icon: faClone,
               text: 'Duplicate row',
               title: 'Duplicate the current row',
@@ -277,7 +212,7 @@
             },
             {
               type: 'button',
-              onClick: handleInsertBeforeRow,
+              onClick: () => onInsertBeforeRow(),
               icon: faPlus,
               text: 'Insert before',
               title: 'Insert a row before the current row',
@@ -285,7 +220,7 @@
             },
             {
               type: 'button',
-              onClick: handleInsertAfterRow,
+              onClick: () => onInsertAfterRow(),
               icon: faPlus,
               text: 'Insert after',
               title: 'Insert a row after the current row',
@@ -293,7 +228,7 @@
             },
             {
               type: 'button',
-              onClick: handleRemoveRow,
+              onClick: () => onRemoveRow(),
               icon: faTrashCan,
               text: 'Remove row',
               title: 'Remove current row',
@@ -310,5 +245,6 @@
 
 <ContextMenu
   {items}
+  {onCloseContextMenu}
   tip={showTip ? 'Tip: you can open this context menu via right-click or with Ctrl+Q' : undefined}
 />
diff --git a/src/lib/components/modes/treemode/contextmenu/TreeContextMenu.svelte b/src/lib/components/modes/treemode/contextmenu/TreeContextMenu.svelte
index e83fc706..85292286 100644
--- a/src/lib/components/modes/treemode/contextmenu/TreeContextMenu.svelte
+++ b/src/lib/components/modes/treemode/contextmenu/TreeContextMenu.svelte
@@ -119,64 +119,7 @@
         )
       : false
 
-  function handleEditKey() {
-    onCloseContextMenu()
-    onEditKey()
-  }
-
-  function handleEditValue() {
-    onCloseContextMenu()
-    onEditValue()
-  }
-
-  function handleToggleEnforceString() {
-    onCloseContextMenu()
-    onToggleEnforceString()
-  }
-
-  function handleCut() {
-    onCloseContextMenu()
-    onCut(true)
-  }
-
-  function handleCutCompact() {
-    onCloseContextMenu()
-    onCut(false)
-  }
-
-  function handleCopy() {
-    onCloseContextMenu()
-    onCopy(true)
-  }
-
-  function handleCopyCompact() {
-    onCloseContextMenu()
-    onCopy(false)
-  }
-
-  function handlePaste() {
-    onCloseContextMenu()
-    onPaste()
-  }
-
-  function handleRemove() {
-    onCloseContextMenu()
-    onRemove()
-  }
-
-  function handleDuplicate() {
-    onCloseContextMenu()
-    onDuplicate()
-  }
-
-  function handleExtract() {
-    onCloseContextMenu()
-    onExtract()
-  }
-
   function handleInsertOrConvert(type: InsertType) {
-    onCloseContextMenu()
-
     if (hasSelectionContents) {
       onConvert(type)
     } else {
@@ -184,26 +127,6 @@
     }
   }
 
-  function handleSort() {
-    onCloseContextMenu()
-    onSort()
-  }
-
-  function handleTransform() {
-    onCloseContextMenu()
-    onTransform()
-  }
-
-  function handleInsertBefore() {
-    onCloseContextMenu()
-    onInsertBefore()
-  }
-
-  function handleInsertAfter() {
-    onCloseContextMenu()
-    onInsertAfter()
-  }
-
   let defaultItems: ContextMenuItem[]
   $: defaultItems = [
     {
@@ -211,7 +134,7 @@
       items: [
         {
           type: 'button',
-          onClick: handleEditKey,
+          onClick: () => onEditKey(),
           icon: faPen,
           text: 'Edit key',
           title: 'Edit the key (Double-click on the key)',
@@ -221,7 +144,7 @@
           type: 'dropdown-button',
           main: {
             type: 'button',
-            onClick: handleEditValue,
+            onClick: () => onEditValue(),
             icon: faPen,
             text: editValueText,
             title: 'Edit the value (Double-click on the value)',
@@ -234,7 +157,7 @@
               icon: faPen,
               text: editValueText,
               title: 'Edit the value (Double-click on the value)',
-              onClick: handleEditValue,
+              onClick: () => onEditValue(),
               disabled: !canEditValue
             },
             {
@@ -242,7 +165,7 @@
               icon: enforceString ? faCheckSquare : faSquare,
               text: 'Enforce string',
               title: 'Enforce keeping the value as string when it contains a numeric value',
-              onClick: handleToggleEnforceString,
+              onClick: () => onToggleEnforceString(),
               disabled: !canEnforceString
             }
           ]
@@ -257,7 +180,7 @@
           type: 'dropdown-button',
           main: {
             type: 'button',
-            onClick: handleCut,
+            onClick: () => onCut(true),
             icon: faCut,
             text: 'Cut',
             title: 'Cut selected contents, formatted with indentation (Ctrl+X)',
@@ -270,7 +193,7 @@
               icon: faCut,
               text: 'Cut formatted',
               title: 'Cut selected contents, formatted with indentation (Ctrl+X)',
-              onClick: handleCut,
+              onClick: () => onCut(true),
               disabled: !hasSelectionContents
             },
             {
@@ -278,7 +201,7 @@
               icon: faCut,
               text: 'Cut compacted',
               title: 'Cut selected contents, without indentation (Ctrl+Shift+X)',
-              onClick: handleCutCompact,
+              onClick: () => onCut(false),
               disabled: !hasSelectionContents
             }
           ]
@@ -287,7 +210,7 @@
           type: 'dropdown-button',
           main: {
             type: 'button',
-            onClick: handleCopy,
+            onClick: () => onCopy(true),
             icon: faCopy,
             text: 'Copy',
             title: 'Copy selected contents, formatted with indentation (Ctrl+C)',
@@ -300,7 +223,7 @@
               icon: faCopy,
               text: 'Copy formatted',
               title: 'Copy selected contents, formatted with indentation (Ctrl+C)',
-              onClick: handleCopy,
+              onClick: () => onCopy(true),
               disabled: !hasSelectionContents
             },
             {
@@ -308,14 +231,14 @@
               icon: faCopy,
               text: 'Copy compacted',
               title: 'Copy selected contents, without indentation (Ctrl+Shift+C)',
-              onClick: handleCopyCompact,
+              onClick: () => onCopy(false),
               disabled: !hasSelectionContents
             }
           ]
         },
         {
           type: 'button',
-          onClick: handlePaste,
+          onClick: () => onPaste(),
           icon: faPaste,
           text: 'Paste',
           title: 'Paste clipboard contents (Ctrl+V)',
@@ -332,7 +255,7 @@
           items: [
             {
               type: 'button',
-              onClick: handleDuplicate,
+              onClick: () => onDuplicate(),
               icon: faClone,
               text: 'Duplicate',
               title: 'Duplicate selected contents (Ctrl+D)',
@@ -340,7 +263,7 @@
             },
             {
               type: 'button',
-              onClick: handleExtract,
+              onClick: () => onExtract(),
               icon: faCropAlt,
               text: 'Extract',
               title: 'Extract selected contents',
@@ -348,7 +271,7 @@
             },
             {
               type: 'button',
-              onClick: handleSort,
+              onClick: () => onSort(),
               icon: faSortAmountDownAlt,
               text: 'Sort',
               title: 'Sort array or object contents',
@@ -356,7 +279,7 @@
             },
             {
               type: 'button',
-              onClick: handleTransform,
+              onClick: () => onTransform(),
               icon: faFilter,
               text: 'Transform',
               title: 'Transform array or object contents (filter, sort, project)',
@@ -364,7 +287,7 @@
             },
             {
               type: 'button',
-              onClick: handleRemove,
+              onClick: () => onRemove(),
               icon: faTrashCan,
               text: 'Remove',
               title: 'Remove selected contents (Delete)',
@@ -420,7 +343,7 @@
       items: [
         {
           type: 'button',
-          onClick: handleInsertBefore,
+          onClick: () => onInsertBefore(),
           icon: faCaretSquareUp,
           text: 'Insert before',
           title: 'Select area before current entry to insert or paste contents',
@@ -428,7 +351,7 @@
         },
         {
           type: 'button',
-          onClick: handleInsertAfter,
+          onClick: () => onInsertAfter(),
           icon: faCaretSquareDown,
           text: 'Insert after',
           title: 'Select area after current entry to insert or paste contents',
@@ -443,5 +366,6 @@
 
 <ContextMenu
   {items}
+  {onCloseContextMenu}
   tip={showTip ? 'Tip: you can open this context menu via right-click or with Ctrl+Q' : undefined}
 />