Eliminating Jquery positioning of menu

Author: ddooley

lib/editors/KeyValueEditor.js

@@ -1,13 +1,16 @@
-import $ from 'jquery';
 import Handsontable from 'handsontable';
 import { MULTIVALUED_DELIMITER} from '../utils/fields';
 import { isEmptyUnitVal } from '../utils/general';
 
 // Derived from: https://jsfiddle.net/handsoncode/f0b41jug/
 
 /**
- * The cell type adds supports for displaing the label value except the key in the key-value
+ * The cell type adds supports for displaying the label value except the key in the key-value
  * dropdown editor type.
+ *
+ * NOTE on filtering: The hiddenRows plugin is used to filter while keeping all source data
+ * in the inner HOT. If filtering stops working after an updateSettings call, call
+ * dropdownHotInstance.getPlugin('hiddenRows').enablePlugin() to re-enable the plugin.
  */
 export default class KeyValueListEditor extends Handsontable.editors
   .HandsontableEditor {
@@ -26,38 +29,44 @@ export default class KeyValueListEditor extends Handsontable.editors
   prepare(row, col, prop, td, value, cellProperties) {
     super.prepare(row, col, prop, td, value, cellProperties);
     let self = this;
-    this.MENU_HEIGHT = 200;
 
     function filter(event) {
-      const text = event.srcElement.value.toLowerCase();// word typed so far.
+      const text = (event.target || event.srcElement).value.toLowerCase();
       const hide = [];
       const show = [];
-      let count = 0;
       self.htOptions.data.forEach((row, index) => {
-        count += 1;
-        if (row.label.toLowerCase().includes(text)) // && count < 13
+        if (row.label.toLowerCase().includes(text))
           show.push(index);
         else
           hide.push(index);
       });
       self.hiddenRowsPlugin.showRows(show);
       self.hiddenRowsPlugin.hideRows(hide);
-      self.dropdownHotInstance.render();
-    }
 
-    // Setting for pulldown menu display
+      if (self._flipAbove && self.htContainer) {
+        const visibleCount = show.length;
+        const newH = Math.max(23, Math.min(visibleCount * 23, self._dropdownMaxH));
+        self.dropdownHotInstance.updateSettings({ height: newH });
+        // Re-apply hidden rows in case updateSettings reset the plugin state
+        self.hiddenRowsPlugin.showRows(show);
+        self.hiddenRowsPlugin.hideRows(hide);
+        self.dropdownHotInstance.render();
+        self.htContainer.style.top = `${self._cellTop - newH}px`;
+      } else {
+        self.dropdownHotInstance.render();
+      }
+    }
 
-    // Adding dynamic filter. DOM element textarea.handsontableInput. This is
-    // relative to event's TEXTAREA since there are other textareas around
-    // Done as an onkeyup() since its reset each time user visits a table cell.
-    this.TEXTAREA.onkeyup = filter;
+    // Adding dynamic filter. Done as oninput since it only fires when the value actually
+    // changes (not on arrow/modifier keys), and is reset each time user visits a table cell.
+    this.TEXTAREA.oninput = filter;
 
     Object.assign(this.htOptions, {
       licenseKey: 'non-commercial-and-evaluation',
       data: this.cellProperties.source,
       rowHeaders: false,
-      colWidths: 250, 
-      height: this.MENU_HEIGHT,
+      colWidths: 250,
+      height: 200, // Initial height; overridden by open() based on available space.
       columns: [{data: '_id'},{data: 'label'}],
       hiddenColumns: {columns: [0]},
       hiddenRows: {rows: []},
@@ -90,34 +99,84 @@ export default class KeyValueListEditor extends Handsontable.editors
 
   }
 
-  // Done once each time user clicks on cell and menu is displayed. 
-  focus() {
+  /**
+   * Opens the dropdown, computing height and position based on available viewport space.
+   * Phase 1: sets htOptions.height before super.open() constructs the inner HOT instance.
+   * Phase 2: after render, flips above the cell using position:fixed if space below is tight.
+   */
+  open() {
+    const ROW_HEIGHT = 23;
+    const MAX_ROWS = 10;
+
+    // Reset previous state
+    this._flipAbove = false;
+    this._cellTop = 0;
+    this._dropdownMaxH = 0;
+    if (this.htContainer) {
+      this.htContainer.style.transform = '';
+      this.htContainer.style.position = '';
+      this.htContainer.style.top = '';
+      this.htContainer.style.left = '';
+      this.htContainer.style.width = '';
+      this.htContainer.style.zIndex = '';
+    }
+
+    // Phase 1: compute height before inner HOT is constructed by super.open()
+    if (this.TD && this.cellProperties) {
+      const cellRect = this.TD.getBoundingClientRect();
+      const viewH = window.innerHeight || document.documentElement.clientHeight;
+      const hotBottom = this.hot.rootElement
+        ? this.hot.rootElement.getBoundingClientRect().bottom : viewH;
+      const effectiveBottom = Math.min(viewH, hotBottom);
+      const spaceBelow = effectiveBottom - cellRect.bottom;
+      const spaceAbove = cellRect.top;
+      const wantedH = Math.min(
+        (this.cellProperties.source || []).length, MAX_ROWS
+      ) * ROW_HEIGHT;
+      const willOpenAbove = spaceBelow < wantedH && spaceAbove > spaceBelow;
+      const available = willOpenAbove ? spaceAbove : spaceBelow;
+      const dropdownH = Math.max(ROW_HEIGHT, Math.min(wantedH, available - 4));
+      this._dropdownMaxH = dropdownH;
+      this.htOptions.height = dropdownH;
+    }
 
+    super.open();
+
+    // Phase 2: flip above cell with position:fixed if space below is insufficient.
+    // Use actual rendered height from getBoundingClientRect() (forces a synchronous layout
+    // reflow) rather than the Phase 1 estimate, so positioning is accurate on first paint.
+    if (this.TD && this.htContainer) {
+      const actualH = this.htContainer.getBoundingClientRect().height;
+      if (actualH > 0) {
+        const cellRect = this.TD.getBoundingClientRect();
+        const viewH = window.innerHeight || document.documentElement.clientHeight;
+        const hotBottom = this.hot.rootElement
+          ? this.hot.rootElement.getBoundingClientRect().bottom : viewH;
+        const effectiveBottom = Math.min(viewH, hotBottom);
+        const spaceBelow = effectiveBottom - cellRect.bottom;
+
+        if (spaceBelow < actualH && cellRect.top > spaceBelow) {
+          this._flipAbove = true;
+          this._cellTop = cellRect.top;
+          this._dropdownMaxH = actualH; // update to actual for filter resize path
+          const w = this.htContainer.offsetWidth || 250;
+          this.htContainer.style.position = 'fixed';
+          this.htContainer.style.zIndex = '99999';
+          this.htContainer.style.width = `${w}px`;
+          this.htContainer.style.left = `${cellRect.left}px`;
+          this.htContainer.style.top = `${cellRect.top - actualH}px`;
+        }
+      }
+    }
+  }
+
+  // Done once each time user clicks on cell and menu is displayed.
+  focus() {
     super.focus();
 
-    // Helpers for autocomplete .filter() show/hide of rows:
+    // Helpers for filter() show/hide of rows via hiddenRows plugin:
     this.dropdownHotInstance = this.hot.getActiveEditor().htEditor;
     this.hiddenRowsPlugin = this.dropdownHotInstance.getPlugin('hiddenRows');
-
-    // This section is to fix a handsontable bug where autocomplete/ dropdown
-    // menus don't display if at bottom of a menu.
-    this.menu = this.TEXTAREA.nextElementSibling;
-    const menu_height = $(this.menu).height();
-
-    this.input_top = $(this.TEXTAREA).offset().top;
-    this.input_height = $(this.TEXTAREA).height();
-    const dh_height = $('#data-harmonizer-grid').height();
-    const dh_top = $('#data-harmonizer-grid').offset().top;
-    // Flip menu to top of input area if it would otherwise extend below DH table area.
-    this.menu_above = (dh_height + dh_top) < (this.input_top + menu_height);
-    // This is the starting height of the menu.
-    if (this.menu_above)
-      $('div.handsontableEditor').css('top', '-' + menu_height + 'px');
-    else
-      $('div.handsontableEditor').css('top', '0px');
-    // Imposes table.htCoreposition: fixed in data-harmonizer.css :
-    $(this.menu).toggleClass('menu-above', this.menu_above); 
-
   }
 
   /**
@@ -223,7 +282,7 @@ export const multiKeyValueListRenderer = function (hot, TD, row, col, prop, valu
       .join(MULTIVALUED_DELIMITER);
     }
 
-    // This directly sets what is displayed in the cell on render() 
+    // This directly sets what is displayed in the cell on render()
     // Uses the label as the display value but keep the _id as the stored value
     TD.innerHTML = `<div class="htAutocompleteArrow">▼</div>${label}`;
     //}