fixes multiselect menu issue

Author: ddooley

lib/DataHarmonizer.js

@@ -643,7 +643,26 @@ class DataHarmonizer {
 
           //console.log("afterSelectionEnd",self.schema, row, column, row2, column2, selectionLayerLevel)
 
-          // This is getting triggered twice? Trap and exit
+          /* This is getting triggered twice. Trap and exit.
+           * Claude explanation:  Not DOM event bubbling — Handsontable's hook system is internal, entirely separate from the DOM event system. The double-fire is caused by Handsontable's own plugin system re-triggering the selection hook as a side effect of the work done inside the handler.
+
+          The causal chain:
+          1. User clicks a cell → Handsontable fires afterSelectionEnd
+          2. Handler detects a row change → calls crudCalculateDependentKeys
+          3. That leads (through refreshTabDisplay) to tabFilter on dependent DH instances
+          4. tabFilter calls, in sequence:
+            - filtersPlugin.clearConditions() — clears any active filter conditions
+            - hiddenRowsPlugin.showRows(shown) / hideRows(hidden) — changes the visible row set
+            - dh.hot.resumeExecution() — flushes all queued plugin operations at once
+            - dh.render() — redraws the table
+          The resumeExecution() flush is what causes it. When Handsontable flushes queued operations after hiding/showing rows, it internally re-validates and re-applies the current selection
+          to account for the fact that visual row indices may have shifted. That re-validation fires afterSelectionEnd again on the same instance with identical coordinates — same row, column,row2, column2.
+          The suspendExecution() / resumeExecution() pattern is recommended by Handsontable for batching plugin operations, but it comes with the side effect that the selection hooks can re-fire during the flush. It is specifically not the filtersPlugin.clearConditions() call alone, nor the hide/show calls alone — it's the combination flushed together via
+          resumeExecution().
+
+          The deduplication guard in the handler (current_selection coordinate comparison → early return) is the correct way to handle this. It's a well-known Handsontable quirk with the
+          HiddenRows + Filters plugin combination.
+          */
           if (row === self.current_selection[0] 
             && column === self.current_selection[1]
             && row2 === self.current_selection[2]
@@ -1597,29 +1616,6 @@ class DataHarmonizer {
         let meta = dh.getColumnMeta(col);
         if (meta.source && meta.meta?.datatype === 'multivalued') {
 
-          /*
-          const value = dh.getDataAtCell(row, col);
-          const selections = parseMultivaluedValue(value);
-          const formattedValue = formatMultivaluedValue(selections);
-
-          // Cleanup of empty values that can occur with user editing in popup leading/trailing or double ";"
-          if (value !== formattedValue) {
-            dh.setDataAtCell(row, col, formattedValue, 'prevalidate');
-          }
-          let content = '';
-          Object.values(meta.source).forEach(choice => {
-            const {label, value} = choice; // unpacking
-            let selected = selections.includes(value)
-              ? 'selected="selected"'
-              : '';
-            content += `<option value="${value}" ${selected}'>${label}</option>`;
-          });
-
-          $('#field-description-text').html(
-            `<span>${self.slots[col].title}</span>
-            <select multiple class="multiselect" rows="15">${content}</select>`
-          );
-          */
           $('#multiselect-text').html(
             `<span>${self.slots[col].title}</span>
             <select multiple class="multiselect" rows="15"></select>`
@@ -1635,15 +1631,11 @@ class DataHarmonizer {
               items: dh.getDataAtCell(row, col)?.split(MULTIVALUED_DELIMITER) || [],
 
               hideSelected: false,
+              // Required for cursor to appear after selection, otherwise user is left
+              // unable to click within selected items to remove one or more.
               onChange: function() {
-                this.focus(); // required for cursor
-              },
-              /*
-              onBlur: function(e, dest) {alert('blurring')}, // works
-              onDelete: function(values) { // works
-                return confirm(values = array of deleted items);
+                this.focus(); 
               },
-              */
               render: {
                 // This is the label shown for the selected item in the popup 
                 // input control.
@@ -1663,30 +1655,23 @@ class DataHarmonizer {
               },
             }) // must be rendered when html is visible
             // See https://selectize.dev/docs/events
-            /*.on('destroy', ...) not working because .destroy() never fired.
-
-            // Problem: change fires 'beforeChange' on each setDataAtCell
-            .on('change', function () {
-              let newValCsv = formatMultivaluedValue(
-                $('#field-description-text .multiselect').val()
-              );
-              dh.setDataAtCell(row, col, newValCsv, 'multiselect_add');
-            });
-            */
 
-            // HACK TO GET A SINGLE beforeChange event on "OK" of .selectize
-            // so that validation happens only once on updated multiselect items.
-            // This is key to saving selected content.
-            $('#multiselect-modal button[data-dismiss]').off().on('click', function () {
-              let newValCsv = formatMultivaluedValue(
-                $('#multiselect-text .multiselect').val()
-              );
-              dh.setDataAtCell(row, col, newValCsv, 'multiselect_change');
-            })
+          // HACK TO GET A SINGLE beforeChange event on "OK" of .selectize
+          // so that validation happens only once on updated multiselect items.
+          // This is key to saving selected content.
+          $('#multiselect-modal button[data-dismiss]').off().on('click', function () {
+            let newValCsv = formatMultivaluedValue(
+              $('#multiselect-text .multiselect').val()
+            );
+            dh.setDataAtCell(row, col, newValCsv, 'multiselect_change');
+          })
 
           $('#multiselect-modal').modal('show');
-          // Automatically opens menu below input box  
-          $('#multiselect-text .multiselect')[0].selectize.focus();
+          $('#multiselect-text select')[0].selectize.open();
+          // hide().slideDown() briefly removes the dropdown from interaction,
+          // preventing coincidental item selection if the cursor is already over
+          // the area where the dropdown renders.
+          $('#multiselect-text div.selectize-dropdown').hide().slideDown("fast");
         }
       },
     });