Add component stack to ReactControlledValuePropTypes (facebook#9435)

Author: sophiebits

src/renderers/dom/fiber/wrappers/ReactDOMFiberInput.js

@@ -94,7 +94,7 @@ var ReactDOMInput = {
       ReactControlledValuePropTypes.checkPropTypes(
         'input',
         props,
-        getCurrentFiberOwnerName(),
+        getCurrentFiberStackAddendum,
       );
 
       if (

src/renderers/dom/fiber/wrappers/ReactDOMFiberSelect.js

@@ -23,6 +23,10 @@ var ReactControlledValuePropTypes = require('ReactControlledValuePropTypes');
 var {getCurrentFiberOwnerName} = require('ReactDebugCurrentFiber');
 var warning = require('fbjs/lib/warning');
 
+if (__DEV__) {
+  var {getCurrentFiberStackAddendum} = require('ReactDebugCurrentFiber');
+}
+
 var didWarnValueDefaultValue = false;
 
 function getDeclarationErrorAddendum() {
@@ -42,7 +46,7 @@ function checkSelectPropTypes(props) {
   ReactControlledValuePropTypes.checkPropTypes(
     'select',
     props,
-    getCurrentFiberOwnerName(),
+    getCurrentFiberStackAddendum,
   );
 
   for (var i = 0; i < valuePropNames.length; i++) {

src/renderers/dom/fiber/wrappers/ReactDOMFiberTextarea.js

@@ -19,11 +19,14 @@ type TextAreaWithWrapperState = HTMLTextAreaElement & {
 };
 
 var ReactControlledValuePropTypes = require('ReactControlledValuePropTypes');
-var {getCurrentFiberOwnerName} = require('ReactDebugCurrentFiber');
 
 var invariant = require('fbjs/lib/invariant');
 var warning = require('fbjs/lib/warning');
 
+if (__DEV__) {
+  var {getCurrentFiberStackAddendum} = require('ReactDebugCurrentFiber');
+}
+
 var didWarnValDefaultVal = false;
 
 /**
@@ -69,7 +72,7 @@ var ReactDOMTextarea = {
       ReactControlledValuePropTypes.checkPropTypes(
         'textarea',
         props,
-        getCurrentFiberOwnerName(),
+        getCurrentFiberStackAddendum,
       );
       if (
         props.value !== undefined &&

src/renderers/dom/shared/utils/ReactControlledValuePropTypes.js

@@ -61,19 +61,13 @@ var propTypes = {
 };
 
 var loggedTypeFailures = {};
-function getDeclarationErrorAddendum(ownerName) {
-  if (ownerName) {
-    return '\n\nCheck the render method of `' + ownerName + '`.';
-  }
-  return '';
-}
 
 /**
  * Provide a linked `value` attribute for controlled forms. You should not use
  * this outside of the ReactDOM controlled form components.
  */
 var ReactControlledValuePropTypes = {
-  checkPropTypes: function(tagName, props, ownerName) {
+  checkPropTypes: function(tagName, props, getStack) {
     for (var propName in propTypes) {
       if (propTypes.hasOwnProperty(propName)) {
         var error = propTypes[propName](
@@ -90,8 +84,7 @@ var ReactControlledValuePropTypes = {
         // same error.
         loggedTypeFailures[error.message] = true;
 
-        var addendum = getDeclarationErrorAddendum(ownerName);
-        warning(false, 'Failed form propType: %s%s', error.message, addendum);
+        warning(false, 'Failed form propType: %s%s', error.message, getStack());
       }
     }
   },

src/renderers/dom/shared/wrappers/__tests__/ReactDOMInput-test.js

@@ -642,6 +642,13 @@ describe('ReactDOMInput', () => {
       <input type="text" value="zoink" readOnly={false} />,
     );
     expectDev(console.error.calls.count()).toBe(1);
+    expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(
+      'Warning: Failed form propType: You provided a `value` prop to a form ' +
+        'field without an `onChange` handler. This will render a read-only ' +
+        'field. If the field should be mutable use `defaultValue`. ' +
+        'Otherwise, set either `onChange` or `readOnly`.\n' +
+        '    in input (at **)',
+    );
   });
 
   it('should have a this value of undefined if bind is not used', () => {

src/renderers/dom/stack/client/wrappers/ReactDOMInput.js

@@ -83,11 +83,8 @@ var ReactDOMInput = {
   mountWrapper: function(inst, props) {
     if (__DEV__) {
       var owner = inst._currentElement._owner;
-      ReactControlledValuePropTypes.checkPropTypes(
-        'input',
-        props,
-        owner ? owner.getName() : null,
-      );
+      ReactControlledValuePropTypes.checkPropTypes('input', props, () =>
+        getStackAddendumByID(inst._debugID));
 
       if (
         props.checked !== undefined &&

src/renderers/dom/stack/client/wrappers/ReactDOMSelect.js

@@ -16,6 +16,12 @@ var ReactDOMComponentTree = require('ReactDOMComponentTree');
 
 var warning = require('fbjs/lib/warning');
 
+if (__DEV__) {
+  var {
+    getStackAddendumByID,
+  } = require('ReactGlobalSharedState').ReactComponentTreeHook;
+}
+
 var didWarnValueDefaultValue = false;
 
 function getDeclarationErrorAddendum(owner) {
@@ -36,11 +42,8 @@ var valuePropNames = ['value', 'defaultValue'];
  */
 function checkSelectPropTypes(inst, props) {
   var owner = inst._currentElement._owner;
-  ReactControlledValuePropTypes.checkPropTypes(
-    'select',
-    props,
-    owner ? owner.getName() : null,
-  );
+  ReactControlledValuePropTypes.checkPropTypes('select', props, () =>
+    getStackAddendumByID(inst._debugID));
 
   for (var i = 0; i < valuePropNames.length; i++) {
     var propName = valuePropNames[i];

src/renderers/dom/stack/client/wrappers/ReactDOMTextarea.js

@@ -17,6 +17,12 @@ var ReactDOMComponentTree = require('ReactDOMComponentTree');
 var invariant = require('fbjs/lib/invariant');
 var warning = require('fbjs/lib/warning');
 
+if (__DEV__) {
+  var {
+    getStackAddendumByID,
+  } = require('ReactGlobalSharedState').ReactComponentTreeHook;
+}
+
 var didWarnValDefaultVal = false;
 
 /**
@@ -57,12 +63,8 @@ var ReactDOMTextarea = {
 
   mountWrapper: function(inst, props) {
     if (__DEV__) {
-      var owner = inst._currentElement._owner;
-      ReactControlledValuePropTypes.checkPropTypes(
-        'textarea',
-        props,
-        owner ? owner.getName() : null,
-      );
+      ReactControlledValuePropTypes.checkPropTypes('textarea', props, () =>
+        getStackAddendumByID(inst._debugID));
       if (
         props.value !== undefined &&
         props.defaultValue !== undefined &&