From 319cf9b9e1833a4b31209b9dea0d03e89b996d71 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <me@gasim.xyz>
Date: Thu, 14 Feb 2019 23:20:39 +0400
Subject: [PATCH] Add forward ref to SVG Component (#5457)

* Add forward ref to SVG component

* Write proper component for the ref test

* Add ref to jest svg transform and fix tests

* Fix SVG file location

* Use proper `ref` instead of svgRef in tests

* Add ref to svgr loader
---
 .../react-scripts/config/jest/fileTransform.js  | 17 +++++------------
 packages/react-scripts/config/webpack.config.js |  2 +-
 .../src/features/webpack/SvgComponent.js        |  8 +++++++-
 .../src/features/webpack/SvgComponent.test.js   | 11 ++++++++++-
 4 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/packages/react-scripts/config/jest/fileTransform.js b/packages/react-scripts/config/jest/fileTransform.js
index f442f0bbd86..4ed6bdb005d 100644
--- a/packages/react-scripts/config/jest/fileTransform.js
+++ b/packages/react-scripts/config/jest/fileTransform.js
@@ -1,11 +1,3 @@
-// @remove-on-eject-begin
-/**
- * Copyright (c) 2014-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-// @remove-on-eject-end
 'use strict';
 
 const path = require('path');
@@ -18,18 +10,19 @@ module.exports = {
     const assetFilename = JSON.stringify(path.basename(filename));
 
     if (filename.match(/\.svg$/)) {
-      return `module.exports = {
+      return `const React = require('react');
+      module.exports = {
         __esModule: true,
         default: ${assetFilename},
-        ReactComponent: (props) => ({
+        ReactComponent: React.forwardRef((props, ref) => ({
           $$typeof: Symbol.for('react.element'),
           type: 'svg',
-          ref: null,
+          ref: ref,
           key: null,
           props: Object.assign({}, props, {
             children: ${assetFilename}
           })
-        }),
+        })),
       };`;
     }
 
diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 71c0b750f83..b549f13fe3e 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -377,7 +377,7 @@ module.exports = function(webpackEnv) {
                     {
                       loaderMap: {
                         svg: {
-                          ReactComponent: '@svgr/webpack?-svgo![path]',
+                          ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
                         },
                       },
                     },
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js
index 62bad3b1075..b22cb2fe056 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js
@@ -8,4 +8,10 @@
 import React from 'react';
 import { ReactComponent as Logo } from './assets/logo.svg';
 
-export default () => <Logo id="feature-svg-component" />;
+export default () => {
+  return <Logo id="feature-svg-component" />;
+};
+
+export const SvgComponentWithRef = React.forwardRef((props, ref) => (
+  <Logo id="feature-svg-component-with-ref" ref={ref} />
+));
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.test.js
index 1b63788c730..493a6bc87ba 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.test.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.test.js
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import SvgComponent from './SvgComponent';
+import SvgComponent, { SvgComponentWithRef } from './SvgComponent';
 
 describe('svg component', () => {
   it('renders without crashing', () => {
@@ -15,4 +15,13 @@ describe('svg component', () => {
     ReactDOM.render(<SvgComponent />, div);
     expect(div.textContent).toBe('logo.svg');
   });
+
+  it('svg root element equals the passed ref', () => {
+    const div = document.createElement('div');
+    const someRef = React.createRef();
+    ReactDOM.render(<SvgComponentWithRef ref={someRef} />, div);
+    const svgElement = div.getElementsByTagName('svg');
+    expect(svgElement).toHaveLength(1);
+    expect(svgElement[0]).toBe(someRef.current);
+  });
 });