Place cursor at end of find-mode input...

... for FindModeHistory.

1 files changed, 15 insertions, 3 deletions

diff --git a/pages/hud.coffee b/pages/hud.coffee
index f9c29cce..357c3a9e 100644
--- a/pages/hud.coffee
+++ b/pages/hud.coffee
@@ -1,5 +1,17 @@
 findMode = null
 
+# Set the input element's text, and move the cursor to the end.
+setTextInInputElement = (inputElement, text) ->
+  inputElement.textContent = text
+  # Move the cursor to the end.  Based on one of the solutions here:
+  # http://stackoverflow.com/questions/1125292/how-to-move-cursor-to-end-of-contenteditable-entity
+  range = document.createRange()
+  range.selectNodeContents inputElement
+  range.collapse false
+  selection = window.getSelection()
+  selection.removeAllRanges()
+  selection.addRange range
+
 document.addEventListener "keydown", (event) ->
   inputElement = document.getElementById "hud-find-input"
   return unless inputElement? # Don't do anything if we're not in find mode.
@@ -20,12 +32,12 @@ document.addEventListener "keydown", (event) ->
     if rawQuery = FindModeHistory.getQuery findMode.historyIndex + 1
       findMode.historyIndex += 1
       findMode.partialQuery = findMode.rawQuery if findMode.historyIndex == 0
-      inputElement.textContent = rawQuery
+      setTextInInputElement inputElement, rawQuery
       findMode.executeQuery()
   else if event.keyCode == keyCodes.downArrow
     findMode.historyIndex = Math.max -1, findMode.historyIndex - 1
     rawQuery = if 0 <= findMode.historyIndex then FindModeHistory.getQuery findMode.historyIndex else findMode.partialQuery
-    inputElement.textContent = rawQuery
+    setTextInInputElement inputElement, rawQuery
     findMode.executeQuery()
 
 handlers =
@@ -46,7 +58,7 @@ handlers =
 
     inputElement = document.createElement "span"
     inputElement.contentEditable = "plaintext-only"
-    inputElement.textContent = data.text
+    setTextInInputElement inputElement, data.text ? ""
     inputElement.id = "hud-find-input"
     hud.appendChild inputElement