jexcel dropdown arrow key and tab

HTML

<html>
<script src="https://bossanova.uk/jexcel/v4/jexcel.js"></script>
<script src="https://bossanova.uk/jsuites/v3/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v3/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://bossanova.uk/jexcel/v4/jexcel.css" type="text/css" />

<div id="spreadsheet"></div>
<script>
    /**
     * Create worksheet container with two jexcel instances
     */
    var sheets = [
        {
            sheetName: 'Countrie A',
            data: [[10, 11]],
            columns: [
                { type: 'numeric', title: 'A'},
                { type: 'numeric', title: 'B'},
                { type: 'dropdown', source: [{id: 1, name: 'USA'}, {id: 2, name: 'MXN'}], multiple:true }, // Remote source for your dropdown
            ],
            onbeforeinsertcolumn: () => false
        },
        {
            sheetName: 'Countrie B',
            data: [[20, 21]],
            columns: [
                { type: 'numeric', title: 'A'},
                { type: 'numeric', title: 'B'},
                { type: 'dropdown', width: 200, source: [{id: 1, name: 'USA'}, {id: 2, name: 'MXN'}], multiple:true }, // Remote source for your dropdown
            ],
            onbeforeinsertcolumn: () => false
        }
    ];

    jexcel.tabs(document.getElementById('spreadsheet'), sheets);
    document.getElementById('spreadsheet').onkeydown = e => {
        if (e.code == 'ArrowDown') {
            let cell = document.querySelector('.jexcel_dropdown.highlight-selected');
            let instances = document.querySelectorAll('.jexcel_container');
            let currentInstance = Array.from(instances).find(c => c.style.display != 'none');
            let dropdownHasFocus = document.querySelector('.jdropdown-focus');
            if (cell && currentInstance && !dropdownHasFocus) {
                currentInstance.jexcel.openEditor(cell);
            }
        } else if (e.code == 'Tab') {
            let cell =...