title: How to set Focus on Input using Tab Key Press in Next Table Cell
body: <p>Following are scenarios I m implementing using JQuery in HTML</p>
  
  <ul>
  <li>When a user double click on table cell it should a new input inside
  the Double Clicked Cell [Done]</li>
  <li>When a user KeyPress [Tab] and it should move to next Cell [Done]</li>
  </ul>
  
  <p>In Case of 2 Scenario, I need to trigger the <code>dblclick()</code> event on the next Cell which creates the Input Element Inside it, but it is not able to the Focus inside Input Element.</p>
  
  <p>I have tried to debug that scenario not able to understand why it is happening.</p>
  
  <p>I have created a button and written click function which trigger <code>dblclick()</code> , then focus was set inside the Input Element.</p>
  
  <p>I m not able to understand when user click using the mouse / <code>click()</code> then why focus is set on the created input element but why same is not happening when I m triggering double click when from the code using <code>dblclick()</code> </p>
  
  <p>Following are code For the Same:</p>
  
  <hr>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Global Variables
  var TabEdit_sourceInput = null;
  var TabEdit_currentTd = null;
  var TabEdit_DOMtocheck = null;
  var TabEdit_previousHour = null;
  var gridRefreshFlag = false;
  
  //Init Double Click Event on the Table TD
  $('.custom-table-td').dblclick(function(event){
      var tableId = $(this).attr('id');
      var inputId = 'input-'+tableId;
      $(this).html('&lt;input id="input-'+tableId+'" placeholder="Type Message" class="form-control" onkeydown="return initCheckKeypress();" tabindex="1"/&gt;');
      
      //Focusing on Generated Event
      $('#'+inputId).focus();
  
      //Binding the Focus Out Event to
      $('#'+inputId).focusout(function(){
          debugger;
          $('.header').html($(this).val());
       });
       
  });
  
  //Click Event to trigger dblclick on td with id = 'tableData1'
  $('.btn-trigger-dbclick').click(function(){
      $('#tableData1').dblclick();
  });
  
  //Function to check Tab is Press or not
  function initCheckKeypress(evt) {
      "use strict";
      var e = event || evt; // for trans-browser compatibility
      var charCode = e.which || e.keyCode;
      if (charCode === 9) {
          gridRefreshFlag = true;
          TabEdit_sourceInput = $(e.target);
          TabEdit_currentTd = TabEdit_sourceInput.parent();
          TabEdit_DOMtocheck = TabEdit_currentTd.next('td');
          movetoNextTD();
      }
  }
  
  
  //Code to Click on Next Cell
  function movetoNextTD() {
      if (gridRefreshFlag &amp;&amp; TabEdit_DOMtocheck !== null) {
          TabEdit_currentTd.html("");
          TabEdit_DOMtocheck.dblclick();
          resetmovetoNextVariable();
      }
  }
  
  //Reset Global Variable
  function resetmovetoNextVariable(){
      TabEdit_sourceInput = null;
      TabEdit_currentTd = null;
      TabEdit_DOMtocheck = null;
      TabEdit_previousHour = null;
      gridRefreshFlag = false;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Focus Issue&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" &gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-6"&gt;
                  &lt;div class="header"&gt;&lt;/div&gt;
                  &lt;table class="table table-bordered"&gt;
                      &lt;tbody&gt;
                          &lt;tr id="tableRow1"&gt;
                              &lt;th id="tableHeader1" class="custom-table-th"&gt;TH 1&lt;/th&gt;
                              &lt;th id="tableHeader2" class="custom-table-th"&gt;TH 2&lt;/th&gt;
                              &lt;th id="tableHeader3" class="custom-table-th"&gt;TH 3&lt;/th&gt;
                          &lt;/tr&gt;
                          &lt;tr id="tableRow2"&gt;
                              &lt;td id="tableData1" class="custom-table-td"&gt;&lt;/td&gt;
                              &lt;td id="tableData2" class="custom-table-td"&gt;&lt;/td&gt;
                              &lt;td id="tableData3" class="custom-table-td"&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
                  &lt;button class="btn btn-primary btn-trigger-dbclick"&gt;Trigger&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>