Keydown comes before the element value is updated

lib/capybara/poltergeist/client/agent.coffee

@@ -173,10 +173,10 @@ class PoltergeistAgent.Node
     this.trigger('focus')
 
     for char in value
-      @element.value += char
-
       keyCode = this.characterToKeyCode(char)
       this.keyupdowned('keydown', keyCode)
+      @element.value += char
+
       this.keypressed(false, false, false, false, char.charCodeAt(0), char.charCodeAt(0))
       this.keyupdowned('keyup', keyCode)
 

lib/capybara/poltergeist/client/compiled/agent.js

@@ -254,9 +254,9 @@ PoltergeistAgent.Node = (function() {
     this.trigger('focus');
     for (_i = 0, _len = value.length; _i < _len; _i++) {
       char = value[_i];
-      this.element.value += char;
       keyCode = this.characterToKeyCode(char);
       this.keyupdowned('keydown', keyCode);
+      this.element.value += char;
       this.keypressed(false, false, false, false, char.charCodeAt(0), char.charCodeAt(0));
       this.keyupdowned('keyup', keyCode);
     }

spec/integration/session_spec.rb

@@ -120,6 +120,14 @@ describe Capybara::Session do
       it 'fires the blur event' do
         @session.find(:css, '#changes_on_blur').text.should == "Blur"
       end
+
+      it "fires the keydown event before the value is updated" do
+        @session.find(:css, '#value_on_keydown').text.should == "Hello"
+      end
+
+      it "fires the keyup event after the value is updated" do
+        @session.find(:css, '#value_on_keyup').text.should == "Hello!"
+      end
     end
 
     it 'supports running multiple sessions at once' do

spec/support/public/test.js

@@ -18,9 +18,11 @@ $(function() {
     })
     .keydown(function(event) {
       $('#changes_on_keydown').text(increment)
+      $('#value_on_keydown').text($(this).val())
     })
     .keyup(function(event) {
       $('#changes_on_keyup').text(increment)
+      $('#value_on_keyup').text($(this).val())
     })
     .keypress(function() {
       $('#changes_on_keypress').text(increment)

spec/support/views/with_js.erb

@@ -24,6 +24,8 @@
     <p id="changes_on_focus"></p>
     <p id="changes_on_blur"></p>
     <p id="changes_on_keypress"></p>
+    <p id="value_on_keydown"></p>
+    <p id="value_on_keyup"></p>
     <div id="off-the-left" style="position:absolute; left: -5000px;"><a href="/" id="foo">O hai</a></div>
   </body>
 </html>