From 7fa656dae9938a10a8ea9cb83d3d18aa2fbcedd3 Mon Sep 17 00:00:00 2001
From: Cheng Lou <chenglou@fb.com>
Date: Wed, 23 Apr 2014 16:42:50 -0700
Subject: [PATCH] Don't let new keys on `style` from `transferPropsTo` override
 old ones

Previous behavior: `transferPropsTo(<div style={{color: 'red'}} />)` would get `color` overriden if we transfer in a `style={{color: 'blue'}}`. This is inconsistent with how other props are transfered.

This simply reverses the order of arguments.

closes #1435
---
 src/core/ReactPropTransferer.js                | 9 ++++++++-
 src/core/__tests__/ReactPropTransferer-test.js | 7 ++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/core/ReactPropTransferer.js b/src/core/ReactPropTransferer.js
index c64df1201a..9f473265b5 100644
--- a/src/core/ReactPropTransferer.js
+++ b/src/core/ReactPropTransferer.js
@@ -40,6 +40,13 @@ function createTransferStrategy(mergeStrategy) {
   };
 }
 
+var transferStrategyMerge = createTransferStrategy(function(a, b) {
+  // `merge` overrides the first object's (`props[key]` above) keys using the
+  // second object's (`value`) keys. An object's style's existing `propA` would
+  // get overridden. Flip the order here.
+  return merge(b, a);
+});
+
 /**
  * Transfer strategies dictate how props are transferred by `transferPropsTo`.
  * NOTE: if you add any more exceptions to this list you should be sure to
@@ -65,7 +72,7 @@ var TransferStrategies = {
   /**
    * Transfer the `style` prop (which is an object) by merging them.
    */
-  style: createTransferStrategy(merge)
+  style: transferStrategyMerge
 };
 
 /**
diff --git a/src/core/__tests__/ReactPropTransferer-test.js b/src/core/__tests__/ReactPropTransferer-test.js
index 4e20f84adc..92f0a05771 100644
--- a/src/core/__tests__/ReactPropTransferer-test.js
+++ b/src/core/__tests__/ReactPropTransferer-test.js
@@ -37,7 +37,7 @@ describe('ReactPropTransferer', function() {
         return this.transferPropsTo(
           <input
             className="textinput"
-            style={{display: 'block'}}
+            style={{display: 'block', color: 'green'}}
             type="text"
             value=""
           />
@@ -55,7 +55,7 @@ describe('ReactPropTransferer', function() {
         .toBeComponentOfType(React.DOM.input)
         .scalarPropsEqual({
           className: 'textinput',
-          style: {display: 'block'},
+          style: {display: 'block', color: 'green'},
           type: 'text',
           value: ''
         });
@@ -75,7 +75,7 @@ describe('ReactPropTransferer', function() {
     var instance =
       <TestComponent
         className="hidden_elem"
-        style={{width: '100%'}}
+        style={{width: '100%', display: 'none'}}
       />;
     instance = ReactTestUtils.renderIntoDocument(instance);
 
@@ -85,6 +85,7 @@ describe('ReactPropTransferer', function() {
         .scalarPropsEqual({
           className: 'textinput hidden_elem',
           style: {
+            color: 'green',
             display: 'block',
             width: '100%'
           }