Dropdown menu is getting stuck

Tags: #<Tag:0x00007f8b1ac68818>
#1

Morning, I have a drop down menu in my table. But it won’t go away. It’s getting stuck when it’s open and won’t let me select another row.

var container = document.getElementById(‘example’), hot;
var hot = new Handsontable(container, {

            data: @Html.Raw(Json.Encode(Model.Decisions)),
            
            afterChange: function( changes, source ) {
                var decision = hot.getDataAtCell( currentRow, 0 );
                var reason =  hot.getDataAtCell( currentRow, 1 );
                var temp = getReasonFromDecision(decision, reason);
                hot.setDataAtCell(currentRow, 1, temp);
            },
            colHeaders: ['Decision','Reason'],
            columns:[
                {
                    data: 'Decision',
                    type: 'dropdown',
                    source:getDecision()
                },
                {
                    data: 'Reason',
                    type: 'dropdown',
                    source: getReason()
                }

}
]
});

However if I take the afterchange code out, it does go away. How should I correct this please?

#2

this line of code triggers the afterChange hook itself so you go into an infinite loop.

You’d need to create a helper variable (preferably a boolean) to use setDataAtCell only once per cell.

#3

Thank you so much for your response. That makes perfect sense now you’ve explained it. Do you have an example link of a helper variable with setdataatcell please?

#4

Sure. Here’s an example https://jsfiddle.net/3h8s1x4q/

#5