Cascading Dropdown in Handsontable

Question

I am trying to make a dropdown type column while the conditions are determined by another cell's content.

The columns settings are built by a function, where when it should be a cascading dropdown, the source is a function as well.

Everything is working fine, and the function is been called when you double click on the cell. The function is running and return the right array. But the dropdown doesn't open.

Short version of the JS:

data: Object.keys(data[0])[i],
type: "dropdown",
source: function getDropdownList() {
          // function build the array
          return dropdownOptions;
        }

Long version of the JS:

var myData = Handsontable.helper.createSpreadsheetData(5, 5);
var container = document.getElementById('table1');
var settings1 = {
   data: myData,
   columns: buildTypeObject()
}

var table1 = new Handsontable(container, settings1);

function buildTypeObject() {
  var typeObject = [];
  for (var i = 0; i < myData.length; i++) {
    if (i=1) {
        typeObject[i] = {
            data: ("column " + i),
            type: "dropdown",
            source: function getDropdownList() {
                var dropdownOptions = [];
                var selectedRow = table1.getSelected()[0];
                var selectedColumn = table1.getSelected()[1];
                var previousCell = table1.getDataAtCell(selectedRow, selectedColumn-1);
                if (previousCell == "A1") {
                    dropdownOptions = ["AB1","BB1"];
                } else {
                    dropdownOptions = ["ZZ1", "ZZ2", "ZZ3", "ZZ4"];                        
                }
                console.log(dropdownOptions);
                return dropdownOptions;            
            }
        }                
    } else {
        typeObject[i] = {
            data: ("column " + i) 
        }            
    }
 };
 return typeObject;
};

Answer 1

I've managed to fix this with the setCellMeta(row, col, key, value) method.

So now the JS looks like this:

var myData = Handsontable.helper.createSpreadsheetData(5, 5);
var container = document.getElementById('table1');
var settings1 = {
   data: myData,
   columns: buildTypeObject()
}

var table1 = new Handsontable(container, settings1);

function buildTypeObject() {
  var typeObject = [];
  for (var i = 0; i < myData.length; i++) {
    if (i=1) {
        typeObject[i] = {
            data: ("column " + i),
            type: "dropdown",
            source: function getDropdownList() {
                var dropdownOptions = [];
                var selectedRow = table1.getSelected()[0];
                var selectedColumn = table1.getSelected()[1];
                var previousCell = table1.getDataAtCell(selectedRow, selectedColumn-1);
                if (previousCell == "A1") {
                    dropdownOptions = ["AB1","BB1"];
                } else {
                    dropdownOptions = ["ZZ1", "ZZ2", "ZZ3", "ZZ4"];                        
                }
                console.log(dropdownOptions);
                //return dropdownOptions;
                setCellMeta(selectedRow, selectedCol, "source", dropdownOptions);            
            }
        }                
    } else {
        typeObject[i] = {
            data: ("column " + i) 
        }            
    }

The only problem is that the dropdown list doesn't open on the first click, it does on the second click though or when I edit the cell (type in any character or erase)