1

I have a JQuery-based single-page web application with a rich Knockout-based grid.

When I double-click on a row in the Knockout grid, I load a virtual page of data with the details for the selected item, and when I'm done editing it (or if I cancel), I'm returned to the grid. All of this happens on a single page.

If I double-click on a non-text area in the grid or if I set focus to an input field in the form, everything works great when the grid is redisplayed. But if I double-click on some text in a row (like the row item's "Name") and then immediately click "Cancel" to return to the grid, then all of grid's HTML is selected when I redisplay it. It's as if I had clicked and dragged through the grid to select a giant region of text.

I've been trying to programmatically deselect this selected text but to no avail. I've tried various combinations of:

$(document).focus();
$("#idBody").focus();
$("#idBody").trigger("click");

If I click on a region outside the grid, I get the behavior I want. What are my options?

Armchair Bronco
  • 2,367
  • 4
  • 31
  • 44
  • If I explicitly set focus to an input field in the edit form, then I get the behavior I want. So, this is only a problem if the user double-clicks to edit details and then immediately clicks "Cancel". For now, I'm going to set focus to the first input field in the form. – Armchair Bronco Jun 05 '12 at 22:51

1 Answers1

2

The problem when double clicking is that by performing that action browsers by default select the text under the cursor, creating a range of selected text.

Working Fiddle Example!

This solved me the same problem in the past by removing that range of selected text:

if (window.getSelection) {
  if (window.getSelection().empty) {  // Chrome
    window.getSelection().empty();
  } else if (window.getSelection().removeAllRanges) {  // Firefox
    window.getSelection().removeAllRanges();
  }
} else if (document.selection) {  // IE?
  document.selection.empty();
}

You can read about it:

window.getSelection at MDN and DOM Selection at MDN

removeAllRanges method at MSDN and HTMLSelection object at MSDN

Credit for this solution goes to this answer and Mr. Y..

TESTED ON

Windows XP Profissional versão 2002 Service Pack 3

  • Internet Explorer 8.0.6001.18702
  • Opera 11.62
  • Firefox 3.6.16
  • Safari 5.1.2
  • Google Chrome 18.0.1025.168 m
  • K-Meleon 1.5.4

Windows 7 Home Edition Service Pack 1

  • Internet Explorer 9.0.8112.164211C
  • Opera 11.62
  • Firefox 12.0
  • Safari 5.1.4
  • Google Chrome 18.0.1025.168 m

Linux Ubuntu 12.04

  • Firefox 12.0
  • Chromium 18.0.1025.151 (Developer Build 130497 Linux)
Community
  • 1
  • 1
Zuul
  • 16,217
  • 6
  • 61
  • 88
  • Excellent answer. What an elegant solution. I've now added this to my utilities namespace as ns.utils.clearSelectedText(). I verified the fix with IE8, Firefox (12), Chrome (19) and Opera (11.6). I'll check with IE9 later and report back. Thanks again! – Armchair Bronco Jun 05 '12 at 22:58
  • I just verified with IE9 as well. Works great. – Armchair Bronco Jun 05 '12 at 23:15
  • I'll add the "test case" to the answer soon enough, just finishing up the tests :) Tks! – Zuul Jun 05 '12 at 23:16
  • @Armchair Bronco, added the test case suite :) – Zuul Jun 05 '12 at 23:45