fix: #379 ContextMenu not closing after using a custom button via onR…

…enderContextMenu

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)}

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}
 >

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}

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,15 +99,15 @@
  icon: faPen,
  text: 'Edit',
  title: 'Edit the value (Double-click on the value)',
- onClick: handleEditValue,
+ onClick: () => onEditValue(),
  disabled: !canEditValue
  },
  {
  type: 'button',
  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,15 +129,15 @@
  icon: faCut,
  text: 'Cut formatted',
  title: 'Cut selected contents, formatted with indentation (Ctrl+X)',
- onClick: handleCut,
+ onClick: () => onCut(true),
  disabled: !hasSelectionContents
  },
  {
  type: 'button',
  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,30 +159,30 @@
  icon: faCopy,
  text: 'Copy formatted',
  title: 'Copy selected contents, formatted with indentation (Ctrl+C)',
- onClick: handleCopy,
+ onClick: () => onCopy(false),
  disabled: !hasSelectionContents
  },
  {
  type: 'button',
  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)',
  disabled: !hasSelection
  },
  {
  type: 'button',
- onClick: handleRemove,
+ onClick: () => onRemove(),
  icon: faTrashCan,
  text: 'Remove',
  title: 'Remove selected contents (Delete)',
@@ -261,39 +196,39 @@
  { type: 'label', text: 'Table row:' },
  {
  type: 'button',
- onClick: handleEditRow,
+ onClick: () => onEditRow(),
  icon: faPen,
  text: 'Edit row',
  title: 'Edit the current row',
  disabled: !hasSelectionContents
  },
  {
  type: 'button',
- onClick: handleDuplicateRow,
+ onClick: () => onDuplicateRow(),
  icon: faClone,
  text: 'Duplicate row',
  title: 'Duplicate the current row',
  disabled: !hasSelection
  },
  {
  type: 'button',
- onClick: handleInsertBeforeRow,
+ onClick: () => onInsertBeforeRow(),
  icon: faPlus,
  text: 'Insert before',
  title: 'Insert a row before the current row',
  disabled: !hasSelection
  },
  {
  type: 'button',
- onClick: handleInsertAfterRow,
+ onClick: () => onInsertAfterRow(),
  icon: faPlus,
  text: 'Insert after',
  title: 'Insert a row after the current row',
  disabled: !hasSelection
  },
  {
  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}
 />