fix(tilegroup): guard usage of potentially null children properties (#17258)

Author: tay1orjones

packages/react/src/components/TileGroup/TileGroup.tsx

@@ -91,7 +91,7 @@ const TileGroup = (props) => {
     const traverseAndModifyChildren = (children) => {
       return React.Children.map(children, (child) => {
         // If RadioTile found, return it with necessary props
-        if (child.type === RadioTile) {
+        if (child?.type === RadioTile) {
           const { value, ...otherProps } = child.props;
           return (
             <RadioTile
@@ -104,7 +104,7 @@ const TileGroup = (props) => {
               checked={value === selected}
             />
           );
-        } else if (child.props && child.props.children) {
+        } else if (child?.props?.children) {
           // If the child is not RadioTile and has children, recheck the children
           return React.cloneElement(child, {
             ...child.props,

packages/react/src/components/TileGroup/__tests__/TileGroup-test.js

@@ -8,6 +8,7 @@
 import React from 'react';
 import TileGroup from '../TileGroup';
 import RadioTile from '../../RadioTile/RadioTile';
+import Button from '../../Button';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
 import { FeatureFlags } from '../../FeatureFlags';
@@ -94,6 +95,39 @@ describe('TileGroup', () => {
       expect(screen.getByDisplayValue('test-2')).toBeRequired();
     });
 
+    it('should handle non-RadioTile (null) children', async () => {
+      const ToggleableRadioTiles = () => {
+        const [showSecondTile, setShowSecondTile] = React.useState(true);
+        return (
+          <>
+            <Button onClick={() => setShowSecondTile(!showSecondTile)}>
+              Toggle second tile
+            </Button>
+
+            <TileGroup defaultSelected="test-1" legend="TestGroup" name="test">
+              <RadioTile id="test-1" value="test-1">
+                Option 1
+              </RadioTile>
+              {showSecondTile && (
+                <RadioTile id="test-2" value="test-2">
+                  Option 2
+                </RadioTile>
+              )}
+            </TileGroup>
+          </>
+        );
+      };
+      render(<ToggleableRadioTiles />);
+
+      expect(screen.getByDisplayValue('test-1')).toBeVisible();
+      expect(screen.getByDisplayValue('test-2')).toBeVisible();
+
+      await userEvent.click(screen.getByRole('button'));
+
+      expect(screen.getByDisplayValue('test-1')).toBeVisible();
+      expect(screen.queryByDisplayValue('test-2')).not.toBeInTheDocument();
+    });
+
     it('should support a custom `className` on the outermost element', () => {
       const { container } = render(
         <TileGroup