Merge pull request #122 from iamprich/backports-fix-for-jumping-cursor

fixes jumping cursor

Author: adamcreekroad

ruby/hyper-component/lib/react/element.rb

@@ -127,7 +127,7 @@ def merge_event_prop!(event_name, &block)
       end
     end
 
-    def merge_built_in_event_prop!(prop_name)
+    def merge_built_in_event_prop!(prop_name, &block)
       @properties.merge!(
         prop_name => %x{
           function(){
@@ -137,9 +137,17 @@ def merge_built_in_event_prop!(prop_name)
             if (arguments.length > 1) {
               all_args = Array.prototype.slice.call(arguments);
               other_args = all_args.slice(1, arguments.length);
-              return #{yield(React::Event.new(`react_event`), *(`other_args`))};
+              return #{
+                React::State.ignore_bulk_updates(
+                  React::Event.new(`react_event`), *(`other_args`), &block
+                )
+              };
             } else {
-              return #{yield(React::Event.new(`react_event`))};
+              return #{
+                React::State.ignore_bulk_updates(
+                  React::Event.new(`react_event`), &block
+                )
+              };
             }
           }
         }

ruby/hyper-component/spec/react/misc_fixes_spec.rb

@@ -32,6 +32,23 @@ class TestComp < Hyperloop::Component
     end
     expect(page).to have_content('hello')
   end
+
+  it "does not shift cursor position during controlled input updates" do
+    mount "TestComp" do
+      class TestComp < Hyperloop::Component
+        render(DIV) do
+          INPUT(id: :input, value: state.input_value)
+            .on(:change) { |e| mutate.input_value(e.target.value) }
+        end
+      end
+    end
+    input = find('#input')
+    input.send_keys '1234567890'
+    evaluate_script "$('#input').focus()[0].setSelectionRange(3, 3)"
+    input.send_keys 'hello'
+    expect(input.value).to eq('123hello4567890')
+  end
+
   it "and it can still use the deprecated mutate syntax" do
     mount "TestComp" do
       class TestComp < Hyperloop::Component

ruby/hyper-store/lib/react/state.rb

@@ -19,6 +19,18 @@ def bulk_update
         @bulk_update_flag = saved_bulk_update_flag
       end
 
+      # React already will batch together updates inside of event handlers
+      # so we don't have to, and having Hyperstack batch them outside of the
+      # event handler causes INPUT/TEXT/SELECT s not to work properly.
+      # This method is called by the Component event wrapper.
+      def ignore_bulk_updates(*args)
+        saved_ignore_bulk_update_flag = @ignore_bulk_update_flag
+        @ignore_bulk_update_flag = true
+        yield(*args)
+      ensure
+        @ignore_bulk_update_flag = saved_ignore_bulk_update_flag
+      end
+
       def set_state2(object, name, value, updates, exclusions = nil)
         # set object's name state to value, tell all observers it has changed.
         # Observers must implement update_react_js_state
@@ -59,7 +71,7 @@ def get_state(object, name, current_observer = @current_observer)
       def set_state(object, name, value, delay=ALWAYS_UPDATE_STATE_AFTER_RENDER)
         states[object][name] = value
         delay = false if object.respond_to?(:set_state_synchronously?) && object.set_state_synchronously?
-        if delay || @bulk_update_flag
+        if !@ignore_bulk_update_flag && (delay || @bulk_update_flag)
           @delayed_updates ||= Hash.new { |h, k| h[k] = {} }
           @delayed_updates[object][name] = [value, Set.new]
           @delayed_updater ||= after(0.001) do
@@ -80,6 +92,8 @@ def set_state(object, name, value, delay=ALWAYS_UPDATE_STATE_AFTER_RENDER)
           updates.each { |observer, args| observer.update_react_js_state(*args) }
         end
         value
+      ensure
+        'Disabling JIT for Safari bug'
       end
 
       def will_be_observing?(object, name, current_observer)