rjsf-team#1209 | allow widget to be wrapped as React.ForwardedRef (rj…

…sf-team#1227)

package.json

@@ -47,7 +47,8 @@
     "babel-runtime": "^6.26.0",
     "core-js": "^2.5.7",
     "lodash.topath": "^4.5.2",
-    "prop-types": "^15.5.8"
+    "prop-types": "^15.5.8",
+    "react-is": "^16.8.4"
   },
   "devDependencies": {
     "atob": "^2.0.3",

src/utils.js

@@ -1,6 +1,7 @@
 import React from "react";
-import validateFormData from "./validate";
+import * as ReactIs from "react-is";
 import fill from "core-js/library/fn/array/fill";
+import validateFormData from "./validate";
 
 export const ADDITIONAL_PROPERTY_FLAG = "__additional_property";
 
@@ -98,7 +99,7 @@ export function getWidget(schema, widget, registeredWidgets = {}) {
     return Widget.MergedWidget;
   }
 
-  if (typeof widget === "function") {
+  if (typeof widget === "function" || ReactIs.isForwardRef(widget)) {
     return mergeOptions(widget);
   }
 

test/utils_test.js

@@ -1,4 +1,5 @@
 import { expect } from "chai";
+import React from "react";
 
 import {
   asNumber,
@@ -7,6 +8,7 @@ import {
   deepEquals,
   getDefaultFormState,
   getSchemaType,
+  getWidget,
   isFilesArray,
   isConstant,
   toConstant,
@@ -1552,4 +1554,52 @@ describe("utils", () => {
       }
     });
   });
+
+  describe.only("getWidget()", () => {
+    const schema = {
+      type: "object",
+      properties: {
+        object: {
+          type: "object",
+          properties: {
+            array: {
+              type: "array",
+              default: ["foo", "bar"],
+              items: {
+                type: "string",
+              },
+            },
+            bool: {
+              type: "boolean",
+              default: true,
+            },
+          },
+        },
+      },
+    };
+
+    it("should fail if widget has incorrect type", () => {
+      const Widget = new Number(1);
+      expect(() => getWidget(schema, Widget)).to.Throw(
+        Error,
+        `Unsupported widget definition: object`
+      );
+    });
+
+    it("should fail if widget has no type property", () => {
+      const Widget = "blabla";
+      expect(() => getWidget(schema, Widget)).to.Throw(
+        Error,
+        `No widget for type "object"`
+      );
+    });
+
+    //TODO: Unskip the test when react>=16.3 will be used
+    it.skip("should not fail on forwarded ref component", () => {
+      const Widget = React.forwardRef((props, ref) => (
+        <div {...props} ref={ref} />
+      ));
+      expect(getWidget(schema, Widget)).eql(<Widget />);
+    });
+  });
 });