fix: allow modal to be wrapped in a React.Fragment (#1826)

WTTJ · Jan 5, 2023 · 5c27b72 · 5c27b72
1 parent 5bb7479
commit 5c27b72
Showing 1 changed file with 22 additions and 1 deletion.
diff --git a/packages/Modal/index.tsx b/packages/Modal/index.tsx
@@ -63,7 +63,16 @@ const ModalComponent = forwardRef<'div', ModalProps>(
     const contentScrollHeight = contentRef?.current?.scrollHeight
 
     const components = useMemo(
-      () => Children.map(children, child => child?.type?.displayName || child?.type?.name),
+      () =>
+        Children.map(children, child => {
+          if (child.type === React.Fragment) {
+            return Children.map(
+              child.props.children,
+              _child => _child?.type?.displayName ?? _child?.type?.name
+            )
+          }
+          return child?.type?.displayName ?? child?.type?.name
+        }),
       [children]
     )
 
@@ -129,6 +138,18 @@ const ModalComponent = forwardRef<'div', ModalProps>(
           <CloseElement onClick={closeModal} />
           {Children.map(children, (child: JSX.Element) => {
             if (!child) return null
+            if (child.type === React.Fragment) {
+              return Children.map(child.props.children, _child => {
+                const name = _child?.type?.displayName || _child?.type?.name
+
+                return cloneElement(_child, {
+                  ref: setRef(name),
+                  ...getStyles(name),
+                  ..._child.props,
+                })
+              })
+            }
+
             const name = child?.type?.displayName || child?.type?.name
 
             return cloneElement(child, {