closes #110

Author: catmando

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

@@ -96,7 +96,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(){
@@ -106,9 +106,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(Event.new(`react_event`), *(`other_args`))};
+                return #{
+                  Internal::State::Mapper.ignore_bulk_updates(
+                    Event.new(`react_event`), *(`other_args`), &block
+                  )
+                };
               } else {
-                return #{yield(Event.new(`react_event`))};
+                return #{
+                  Internal::State::Mapper.ignore_bulk_updates(
+                    Event.new(`react_event`), &block
+                  )
+                };
               }
             }
           }

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

@@ -32,6 +32,21 @@ 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 < HyperComponent
+        render(DIV) do
+          INPUT(id: :input, value: @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-state/lib/hyperstack/internal/state/mapper.rb

@@ -102,6 +102,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 ignore_mutations
             saved_ignore_mutations_flag = @ignore_mutations
             @ignore_mutations = true
@@ -207,9 +219,10 @@ def remove_current_observers_and_objects(observer)
           # case that the object being updated is themselves.
 
           def delay_updates?(object)
-            @bulk_update_flag ||
-              (Hyperstack.on_client? &&
-                (@immediate_update != @current_observer || @current_observer != object))
+            return false if @ignore_bulk_update_flag
+            return true  if @bulk_update_flag
+            return false unless Hyperstack.on_client?
+            (@immediate_update != @current_observer || @current_observer != object)
           end
 
           # schedule_delayed_updater adds a new set to the