Bootstrap Modal focus issue

Question

i have bootstrap modal in which i having table and i want to focus on row by pressing key up and key down below is my code in js but focus is not working in IE only

var _checkKey = function (e) {
    var event = window.event ? window.event : e;
    if (event.keyCode === 13)  // the enter key code
    {
        $("tr:focus").click();
        event.preventDefault();
        return;
    }

    if (event.keyCode === 40) { //down
        event.preventDefault();

        var idx = $("tr:focus").attr("tabindex");
        if (!idx)
            idx = 0;
        else
            idx++;

        $("tr[tabindex=" + idx + "]").focus();
    }
    if (event.keyCode === 38) { //up
        event.preventDefault();

        var idx = $("tr:focus").attr("tabindex");
        idx--;

        $("tr[tabindex=" + idx + "]").focus();
    }
}

this function is calling by keydown event

bellow is html code for bootstrap modal,

same code is working in chrome and IE 11 but not working if its in bootstrap model

 <div class="modal fade in" id="commonModal" role="dialog" aria-hidden="false" style="display: block;"> <div class="modal-dialog modal-lg"> <div class="modal-content visible-o-flow"> <div class="modal-header"> <h3 class="modal-title fl" id="Title">Header</h3> <button class="close wa m-0 fr" aria-label="Close" type="button" data-dismiss="modal"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body fw" id="miscDiv"> <form class="fh" id="msform"> <div class="col-md-12 p-0"> <div id="lookupDiv" style="left: 191.09px; top: 153.68px; width: 538.4px; display: block; position: absolute; z-index: 9000;"> <table class="table table-responsive table-fixed table-hover"> <thead> <tr> <th class="col-md-3">Code</th> <th class="col-md-9">Description</th> </tr> </thead> <tbody id="lookupTable"> <tr tabindex="0" style="cursor: pointer;"><td>729</td><td>SAMOA</td></tr> <tr tabindex="1" style="cursor: pointer;"><td>209</td><td>AFGHANISTAN</td></tr> <tr tabindex="2" style="cursor: pointer;"><td>265</td><td>AZERBAIJAN</td></tr> <tr tabindex="3" style="cursor: pointer;"><td>201</td><td>IRAN (ISLAMIC REPUBLIC OF)</td></tr> <tr tabindex="4" style="cursor: pointer;"><td>235</td><td>NEPAL</td></tr> <tr tabindex="5" style="cursor: pointer;"><td>645</td><td>PARAGUAY</td></tr> <tr tabindex="6" style="cursor: pointer;"><td>347</td><td>SIERRA LEONE</td></tr> <tr tabindex="7" style="cursor: pointer;"><td>267</td><td>TAJIKISTAN</td></tr> <tr tabindex="8" style="cursor: pointer;"><td>233</td><td>VIET NAM</td></tr> <tr tabindex="9" style="cursor: pointer;"><td>309</td><td>CAMEROON</td></tr> <tr tabindex="10" style="cursor: pointer;"><td>727</td><td>MARSHALL ISLANDS</td></tr> </tbody> </table> </div> </div> </form> </div> </div> </div> </div> 

Answer 1

Try put this after the var event line:

var event = window.event ? window.event : e;
var kCode = event.keyCode || event.which;//for IE, FireFox and Chrome
if (kCode === 13)...

At least for me works in Chrome and FireFox

Answer 2

I had a same issue but did not get any religious solution and I went through this

I put this code on modal click event.

setTimeout(()=>{
    document.getElementById("id").focus();
},9000);

//id is the name of element where you want to put your focus