Using both jexcel "tableOverflow = true" and jsuites dropdown "autocomplete = true" prevent the dropdown from opening in some scenarios.

[VincentGuinaudeau]

Reproduction scenario : https://jsfiddle.net/jbpL7ovd/

When the two options mentionned in the title are used, the two following pieces of code are in conflict.

jsuites/dropdown.js: open()

jexcel/core.js: scrollControls()

When opening the dropdown, the autocomplete option activate a focus action on the dropdown, presumably to allow the user to start typing right away.

However, it has the side effect to bring the dropdown into view, scrolling the view if necessary. If the jexcel table was created with tableOverflow: true, then the .jexcel_content div may be the one scrolled to bring the cell into view.

When this happen, a scroll event on the .jexcel_content div is emited and catched by jexcelObj.scrollControlls, who in turn calls jexcelObj.closeEditor, closing the dropdown rigth after it was open, giving the impression it was not opened in the first place.

This can happen in two cases :

• When a cell is not fully visible. The first double click will bring the cell fully into view, but a second double click is needed to open the dropdown.
  • When a cell is on the last column, and it's dropdown would extend below the table and over the height limit, displaying the dropdown make the vertical scrollbar appear, scrolling the table and triggering the issue. In this case you cannot open the dropdown. You can see this with the bottom three cells on the last column in the example.

I tried to come up with a workaround by wrapping openEditor and scrollControlls, but hit others issues. I will post it if I get it to work.

[VincentGuinaudeau]

Finally managed to make the workaround work (it was a typo, of course :sob: )

    let preventScrollClose = false;
    jExcelObj.__openEditor__ = jExcelObj.openEditor;
    jExcelObj.openEditor = function (...args) {
        preventScrollClose = true;
        setTimeout(() => {
            preventScrollClose = false;
        }, 100);
        jExcelObj.__openEditor__(...args);
    }

    jExcelObj.__scrollControls__ = jExcelObj.scrollControls;
    jExcelObj.scrollControls = function (...args) {
        const normalValue = jExcelObj.options.tableOverflow;
        if (preventScrollClose) {
            jExcelObj.options.tableOverflow = false;
        }
        jExcelObj.__scrollControls__(...args);
        jExcelObj.options.tableOverflow = normalValue;
    }

I temporarily change the jExcelObj.options.tableOverflow to false if scrollControls is called 100 ms after openEditor or sooner.