[Flare] Fix SSR issue with serializing responders prop (#16227)

trueadm · web-flow · commit 0d7141dd4980 · 2019-07-26T22:47:37.000+01:00
diff --git a/packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js
@@ -12,6 +12,7 @@
 let React;
 let ReactFeatureFlags;
 let ReactDOM;
+let ReactDOMServer;
 let ReactTestRenderer;
 
 // FIXME: What should the public API be for setting an event's priority? Right
@@ -72,6 +73,7 @@ describe('DOMEventResponderSystem', () => {
     ReactFeatureFlags.enableFlareAPI = true;
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMServer = require('react-dom/server');
     container = document.createElement('div');
     document.body.appendChild(container);
   });
@@ -93,6 +95,14 @@ describe('DOMEventResponderSystem', () => {
     expect(renderer).toMatchRenderedOutput(<div>Hello world</div>);
   });
 
+  it('can render correctly with the ReactDOMServer', () => {
+    const TestResponder = createEventResponder({});
+    const output = ReactDOMServer.renderToString(
+      <div responders={<TestResponder />}>Hello world</div>,
+    );
+    expect(output).toBe(`<div data-reactroot="">Hello world</div>`);
+  });
+
   it('the event responders should fire on click event', () => {
     let eventResponderFiredCount = 0;
     let eventLog = [];
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -346,11 +346,6 @@ const RESERVED_PROPS = {
   suppressHydrationWarning: null,
 };
 
-if (enableFlareAPI) {
-  // $FlowFixMe: Flow doesn't like this, it's temp until we remove the flag anyway
-  RESERVED_PROPS.responders = null;
-}
-
 function createOpenTagMarkup(
   tagVerbatim: string,
   tagLowercase: string,
@@ -365,6 +360,9 @@ function createOpenTagMarkup(
     if (!hasOwnProperty.call(props, propKey)) {
       continue;
     }
+    if (enableFlareAPI && propKey === 'responders') {
+      continue;
+    }
     let propValue = props[propKey];
     if (propValue == null) {
       continue;
