jQuery not selecting text with keyboard navigation

Question

I've got a scoresheet displaying many scores for many students. As the teacher navigates the table, the program should select the text within the field so that the teacher can change the score without having to erase the previous value.

Here is my current coffeescript:

$("input:text").focus ->
    $(this).select()

if $('#scoreTable').length > 0
    document.getElementById("r0c0").focus()

    $(".some_cell").keydown (e) ->
        if e.which == 38
            next_row = parseInt($(this).attr("cell_row")) - 1
            next_col = parseInt($(this).attr("cell_col"))

        else if e.which == 40
            next_row = parseInt($(this).attr("cell_row")) + 1
            next_col = parseInt($(this).attr("cell_col"))

        else if e.which == 37
            next_row = parseInt($(this).attr("cell_row"))
            next_col = parseInt($(this).attr("cell_col")) - 1

        else if e.which == 39
            next_row = parseInt($(this).attr("cell_row"))
            next_col = parseInt($(this).attr("cell_col")) + 1

        $("#r"+next_row+"c"+next_col).focus()

The initial select command works correctly upon page loading. But when I jump to another cell with an arrow key, the cursor is placed after the text. Nothing is selected.

Here the the embedded ruby html that creates the table:

<div>
    <table class="table-borderless scoreTable" id="scoreTable">
      <thead class="table-borderless">
        <th class="table-borderless">Student</th>
        <% @objectives.each_with_index do |objective, index| %>
          <th class="rotate table-borderless"><div><span>
            <%= link_to objective.short_name, edit_objective_path(objective) %>
          </span></div></th>
        <% end %>
      </thead>
      <tbody>
        <% @students.each_with_index do |student, indexx| %>
          <tr>
            <td><h4><%= link_to student.last_name_first, edit_teaching_requests_student_url(student) %> </h4></td>
            <% this_ss = student.seminar_students.find_by(:seminar_id => @seminar.id) %>
            <% @objectives.each_with_index do |objective, indexy| %>
              <% this_score = @scores.find_by(:objective => objective, :user => student) %>
              <td class="themScores to_unhide score_cell">
                <% if this_score %>
                  <%= text_field "scores[#{this_score.id}]", "", :class => "some_cell", :value => this_score.points,
                    :id => "r#{indexx}c#{indexy}", :cell_row => indexx, :cell_col => indexy %>
                <% end %>
              </td>
            <% end %>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>

I've tried adding this line to the coffeescript:

$("#r"+next_row+"c"+next_col).select()

And I've tried adapting the suggestion from this question Looking for a better workaround to Chrome select on focus bug, which I think would translate to coffeescript like this:

$("#r"+next_row+"c"+next_col).select().mouseup (e) ->
    e.preventDefault()
    $(this).unbind("mouseup")

Thank you in advance for any insight.

Is possible to show part of html code where you try to select text? — user13746, Apr 01 '18 at 18:15
Of course! I edited the question to include the embedded ruby html. — Jeff Zivkovic, Apr 01 '18 at 21:38
Try to change focus $("input:text").focus -> to click function $("input:text").click -> and in the click function use $(this).select(); . — user13746, Apr 02 '18 at 11:04
This works to select text upon clicking with the mouse. So I'm glad I did that. But it didn't make any difference with jumping cells with the keyboard. — Jeff Zivkovic, Apr 03 '18 at 02:51

score 0 · Accepted Answer · answered Apr 03 '18 at 03:04

I found this snippet while I continued to browse other questions. It did the job.

        $("#r"+next_row+"c"+next_col).focus()
        callback = -> 
            $("#r"+next_row+"c"+next_col).select()
        setTimeout callback, 10

Credit goes to how to write setTimeout with params by Coffeescript

jQuery not selecting text with keyboard navigation

1 Answers1