Auto selection (addRange) method not works properly while type the text too fast

Question

While type the text in 4th row very fast ("Apple") the auto selection not works properly as expected. But while editing the single text it works as expected(selection works). Please check the below html sample

https://jsplayground.syncfusion.com/3ruatvy0

HTML5 Editable Table

Apple Orange Mango

</table>

 <script>
      
     
         var data = [];

$("table tr").each(function(i, v){
    $(this).children('td').each(function(ii, vv){
        data.push($(this).text());
    }); 
})
console.log(data);
           document.getElementById("table").addEventListener("keyup", event => {
      for (var i = data.length -1 ; i > 0; i--) {
        var cell = data[i - 1];
        if (
          event.key == "Backspace" ||
          event.key == "Delete" ||
          event.key == "Escape"
        ) {
          return;
        } else if (cell) {
          var elem = document.getElementById("editable");
          var textLen = elem.innerHTML.length;
          if (
            elem.innerHTML.toUpperCase() ==
            cell.toUpperCase().slice(0, textLen)
          ) {
            elem.innerText = cell;
            var startNode = document.getElementById(
              "editable"
            ).firstChild;
            startNode.nodeValue = startNode.nodeValue.trim();
            var range = document.createRange();
            range.setStart(startNode, textLen);
            range.setEnd(startNode, startNode.textContent.length);
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
            return;
          }
        } else return;
      }
    });
   
    </script>