Use an editor in the file finder instead of an input element.

spec/atom/file-finder-spec.coffee

@@ -7,6 +7,7 @@ describe 'FileFinder', ->
   beforeEach ->
     urls = ['app.coffee', 'buffer.coffee', 'atom/app.coffee', 'atom/buffer.coffee']
     finder = new FileFinder({urls})
+    finder.enableKeymap()
 
   describe "initialize", ->
     it "populates the ol with all urls and selects the first element", ->
@@ -16,8 +17,7 @@ describe 'FileFinder', ->
 
   describe "when characters are typed into the input element", ->
     it "displays matching urls in the ol element and selects the first", ->
-      finder.input.val('ap')
-      finder.input.trigger 'input'
+      finder.editor.insertText('ap')
 
       expect(finder.urlList.children().length).toBe 2
       expect(finder.urlList.find('li:contains(app.coffee)').length).toBe 2
@@ -26,8 +26,8 @@ describe 'FileFinder', ->
       expect(finder.urlList.find('li.selected').length).toBe 1
 
       # we should clear the list before re-populating it
-      finder.input.val('a/ap')
-      finder.input.trigger 'input'
+      finder.editor.setCursorScreenPosition([0, 0])
+      finder.editor.insertText('a/')
 
       expect(finder.urlList.children().length).toBe 1
       expect(finder.urlList.find('li:contains(atom/app.coffee)').length).toBe 1
@@ -37,13 +37,13 @@ describe 'FileFinder', ->
       expect(finder.find('li:eq(0)')).toHaveClass "selected"
       expect(finder.find('li:eq(2)')).not.toHaveClass "selected"
 
-      finder.trigger 'move-down'
-      finder.trigger 'move-down'
+      finder.editor.trigger keydownEvent('down')
+      finder.editor.trigger keydownEvent('down')
 
       expect(finder.find('li:eq(0)')).not.toHaveClass "selected"
       expect(finder.find('li:eq(2)')).toHaveClass "selected"
 
-      finder.trigger 'move-up'
+      finder.editor.trigger keydownEvent('up')
 
       expect(finder.find('li:eq(0)')).not.toHaveClass "selected"
       expect(finder.find('li:eq(1)')).toHaveClass "selected"
@@ -51,11 +51,11 @@ describe 'FileFinder', ->
 
     it "does not fall off the end or begining of the list", ->
       expect(finder.find('li:first')).toHaveClass "selected"
-      finder.trigger 'move-up'
+      finder.editor.trigger keydownEvent('up')
       expect(finder.find('li:first')).toHaveClass "selected"
 
       for i in [1..urls.length+10]
-        finder.trigger 'move-down'
+        finder.editor.trigger keydownEvent('down')
 
       expect(finder.find('li:last')).toHaveClass "selected"
 
@@ -64,19 +64,20 @@ describe 'FileFinder', ->
 
     beforeEach ->
       finder = new FileFinder({urls, selected: selectedCallback})
+      finder.enableKeymap()
 
     it "when a file is selected Editor.open is called", ->
       spyOn(finder, 'remove')
       finder.moveDown()
-      finder.trigger 'select'
+      finder.editor.trigger keydownEvent('enter')
       expect(selectedCallback).toHaveBeenCalledWith(urls[1])
       expect(finder.remove).toHaveBeenCalled()
 
     it "when no file is selected, does nothing", ->
       spyOn(atom, 'open')
-      finder.input.val('this-will-match-nothing-hopefully')
+      finder.editor.insertText('this-will-match-nothing-hopefully')
       finder.populateUrlList()
-      finder.trigger 'select'
+      finder.editor.trigger keydownEvent('enter')
       expect(atom.open).not.toHaveBeenCalled()
 
   describe "findMatches(queryString)", ->

src/atom/file-finder.coffee

@@ -1,13 +1,14 @@
 $ = require 'jquery'
 {View} = require 'space-pen'
 stringScore = require 'stringscore'
+Editor = require 'editor'
 
 module.exports =
 class FileFinder extends View
   @content: ->
     @div class: 'file-finder', =>
       @ol outlet: 'urlList'
-      @input outlet: 'input', input: 'populateUrlList'
+      @subview 'editor', new Editor
 
   urls: null
   maxResults: null
@@ -16,18 +17,19 @@ class FileFinder extends View
     requireStylesheet 'file-finder.css'
     @maxResults = 10
     @populateUrlList()
-    window.keymap.bindKeys ".file-finder",
-      'up': 'move-up'
-      'down': 'move-down'
-      'enter': 'select'
+    window.keymap.bindKeys ".file-finder .editor",
+      'enter': 'file-finder:select-file'
 
     @on 'move-up', => @moveUp()
     @on 'move-down', => @moveDown()
-    @on 'select', => @select()
+    @on 'file-finder:select-file', => @select()
+
+    @editor.buffer.on 'change', => @populateUrlList()
+    @editor.off 'move-up move-down'
 
   populateUrlList: ->
     @urlList.empty()
-    for url in @findMatches(@input.val())
+    for url in @findMatches(@editor.buffer.getText())
       @urlList.append $("<li>#{url}</li>")
 
     @urlList.children('li:first').addClass 'selected'

src/atom/root-view.coffee

@@ -30,8 +30,8 @@ class RootView extends View
     @on 'show-console', -> window.showConsole()
 
     @on 'focusout', (e) =>
-      # if anything but the editor and its input loses focus, restore focus to the editor
-      unless $(e.target).closest('.editor').length
+      # if anything but the main editor's hidden input loses focus, restore focus to the main editor
+      unless @editor.containsElement($(e.target))
         @editor.focus()
 
   createProject: (url) ->
@@ -55,4 +55,3 @@ class RootView extends View
           urls: relativePaths
           selected: (relativePath) => @editor.setBuffer(@project.open(relativePath))
         @addPane @fileFinder
-        @fileFinder.input.focus()

src/stdlib/jquery-extensions.coffee

@@ -11,3 +11,6 @@ $.fn.scrollRight = (newValue) ->
     @scrollLeft(newValue - @width())
   else
     @scrollLeft() + @width()
+
+$.fn.containsElement = (element) ->
+  (element[0].compareDocumentPosition(this[0]) & 8) == 8

static/file-finder.css

@@ -3,18 +3,21 @@
   width: 100%;
   bottom: 0;
   background-color: #444;
+  box-sizing: border-box;
   color: #eee;
   -webkit-box-shadow: 0 0 5px 5px #222;
+  padding: 5px;
 }
 
 .file-finder ol {
   overflow: hidden;
+  margin-bottom: 5px;
 }
 
 .file-finder li.selected {
   background-color: green;
 }
 
-.file-finder input {
-  width: 100%;
+.file-finder .editor .gutter {
+  display: none;
 }