Merge pull request #350 from Workiva/FED-202-fix-no-children-create-e…

…lement FED-202 Return `jsUndefined` instead of `null` when children prop is empty
Workiva · Dec 6, 2022 · e7466c7 · e7466c7
2 parents cfb12d6 + 0c42257
commit e7466c7
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/lib/src/react_client/factory_util.dart b/lib/src/react_client/factory_util.dart
@@ -83,7 +83,7 @@ dynamic generateChildren(List childrenArgs, {bool shouldAlwaysBeList = false}) {
   var children;
 
   if (childrenArgs.isEmpty) {
-    if (!shouldAlwaysBeList) return null;
+    if (!shouldAlwaysBeList) return jsUndefined;
     children = childrenArgs;
   } else if (childrenArgs.length == 1) {
     if (shouldAlwaysBeList) {

diff --git a/test/factory/js_factory_test.dart b/test/factory/js_factory_test.dart
@@ -5,6 +5,7 @@ library react.js_factory_test;
 import 'dart:html';
 
 import 'package:js/js.dart';
+import 'package:react/react.dart' as react;
 import 'package:react/react_client.dart';
 import 'package:react/react_client/react_interop.dart';
 import 'package:react/react_test_utils.dart';
@@ -54,6 +55,12 @@ main() {
         expect(JsFooFunction.type, equals(_JsFooFunction));
       });
     });
+
+    test('with no children returns JS undefined', () {
+      expect(hasUndefinedChildren(react.div({})), isTrue);
+      expect(hasUndefinedChildren(react.div({}, jsNull)), isFalse,
+          reason: 'Sanity check that JS `null` is not the same as JS `undefined`');
+    });
   });
 }
 
@@ -64,3 +71,6 @@ final JsFoo = new ReactJsComponentFactoryProxy(_JsFoo);
 @JS()
 external ReactClass get _JsFooFunction;
 final JsFooFunction = new ReactJsComponentFactoryProxy(_JsFooFunction);
+
+@JS()
+external bool Function(ReactElement) get hasUndefinedChildren;
diff --git a/test/factory/js_factory_test.js b/test/factory/js_factory_test.js
@@ -7,3 +7,5 @@ window._JsFoo = class JsFooComponent extends React.Component {
 window._JsFooFunction = React.forwardRef((props, ref) => (
   React.createElement("div", {...props, ref: ref})
 ));
+
+window.hasUndefinedChildren = (reactElement) => reactElement.props.children === undefined;