From c5ec5bdb656f757a332ede7d61be6570e4b2aca8 Mon Sep 17 00:00:00 2001
From: Josh <37798644+joshuaellis@users.noreply.github.com>
Date: Thu, 8 Dec 2022 09:14:17 +0000
Subject: [PATCH 1/4] fix: remove overflow hidden to allow react-select menu to
 break out of accordion

---
 .../components/RelationInput/RelationInput.js | 60 ++++++++++---------
 .../components/Accordion.js                   |  1 -
 2 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js b/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
index d3052cc969..eb3ead672b 100644
--- a/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
+++ b/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
@@ -325,35 +325,37 @@ const RelationInput = ({
           )
         }
       >
-        <RelationList overflow={overflow}>
-          <VisuallyHidden id={ariaDescriptionId}>{listAriaDescription}</VisuallyHidden>
-          <VisuallyHidden aria-live="assertive">{liveText}</VisuallyHidden>
-          <List
-            height={dynamicListHeight}
-            ref={listRef}
-            outerRef={outerListRef}
-            itemCount={totalNumberOfRelations}
-            itemSize={RELATION_ITEM_HEIGHT + RELATION_GUTTER}
-            itemData={{
-              ariaDescribedBy: ariaDescriptionId,
-              canDrag: canReorder,
-              disabled,
-              handleCancel: onCancel,
-              handleDropItem: onDropItem,
-              handleGrabItem: onGrabItem,
-              iconButtonAriaLabel,
-              labelDisconnectRelation,
-              onRelationDisconnect,
-              publicationStateTranslations,
-              relations,
-              updatePositionOfRelation: handleUpdatePositionOfRelation,
-            }}
-            itemKey={(index, { relations: relationsItems }) => relationsItems[index].id}
-            innerElementType="ol"
-          >
-            {ListItem}
-          </List>
-        </RelationList>
+        {relations.length > 0 ? (
+          <RelationList overflow={overflow}>
+            <VisuallyHidden id={ariaDescriptionId}>{listAriaDescription}</VisuallyHidden>
+            <VisuallyHidden aria-live="assertive">{liveText}</VisuallyHidden>
+            <List
+              height={dynamicListHeight}
+              ref={listRef}
+              outerRef={outerListRef}
+              itemCount={totalNumberOfRelations}
+              itemSize={RELATION_ITEM_HEIGHT + RELATION_GUTTER}
+              itemData={{
+                ariaDescribedBy: ariaDescriptionId,
+                canDrag: canReorder,
+                disabled,
+                handleCancel: onCancel,
+                handleDropItem: onDropItem,
+                handleGrabItem: onGrabItem,
+                iconButtonAriaLabel,
+                labelDisconnectRelation,
+                onRelationDisconnect,
+                publicationStateTranslations,
+                relations,
+                updatePositionOfRelation: handleUpdatePositionOfRelation,
+              }}
+              itemKey={(index, { relations: relationsItems }) => relationsItems[index].id}
+              innerElementType="ol"
+            >
+              {ListItem}
+            </List>
+          </RelationList>
+        ) : null}
         {(description || error) && (
           <Box paddingTop={2}>
             <FieldHint />
diff --git a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/components/Accordion.js b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/components/Accordion.js
index 362dd26fea..0418aa8baa 100644
--- a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/components/Accordion.js
+++ b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/components/Accordion.js
@@ -14,7 +14,6 @@ export const Footer = styled(Box)`
 
 export const Content = styled(Box)`
   border-bottom: none;
-  overflow: hidden;
 
   /* add the borders and make sure the top is transparent to avoid jumping with the hover effect  */
   & > div > div {

From fee372423bd7cfe120ffc65b6b0a2d9cabcbcb7a Mon Sep 17 00:00:00 2001
From: Josh <37798644+joshuaellis@users.noreply.github.com>
Date: Thu, 8 Dec 2022 09:21:30 +0000
Subject: [PATCH 2/4] Update
 packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js

Co-authored-by: Gustav Hansen <gustav.hansen@strapi.io>
---
 .../content-manager/components/RelationInput/RelationInput.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js b/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
index eb3ead672b..d870e4a978 100644
--- a/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
+++ b/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
@@ -325,7 +325,7 @@ const RelationInput = ({
           )
         }
       >
-        {relations.length > 0 ? (
+        {relations.length > 0 && (
           <RelationList overflow={overflow}>
             <VisuallyHidden id={ariaDescriptionId}>{listAriaDescription}</VisuallyHidden>
             <VisuallyHidden aria-live="assertive">{liveText}</VisuallyHidden>

From 1bd99c89ca97e1da45c24984ffa257ca8adab074 Mon Sep 17 00:00:00 2001
From: Josh <37798644+joshuaellis@users.noreply.github.com>
Date: Thu, 8 Dec 2022 09:28:06 +0000
Subject: [PATCH 3/4] chore: fix lint

---
 .../content-manager/components/RelationInput/RelationInput.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js b/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
index d870e4a978..26ce0ea67e 100644
--- a/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
+++ b/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
@@ -355,7 +355,7 @@ const RelationInput = ({
               {ListItem}
             </List>
           </RelationList>
-        ) : null}
+        )}
         {(description || error) && (
           <Box paddingTop={2}>
             <FieldHint />

From 2383242c244638201539c6a40307c957c8ba55ac Mon Sep 17 00:00:00 2001
From: Josh <37798644+joshuaellis@users.noreply.github.com>
Date: Thu, 8 Dec 2022 09:31:26 +0000
Subject: [PATCH 4/4] chore: update snapshots

---
 .../components/tests/__snapshots__/Accordion.test.js.snap        | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/components/tests/__snapshots__/Accordion.test.js.snap b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/components/tests/__snapshots__/Accordion.test.js.snap
index da20d31da5..4de7c22073 100644
--- a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/components/tests/__snapshots__/Accordion.test.js.snap
+++ b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/components/tests/__snapshots__/Accordion.test.js.snap
@@ -15,7 +15,6 @@ exports[`RepeatableComponent | Accordion Content should render and match the sna
 
 .c0 {
   border-bottom: none;
-  overflow: hidden;
 }
 
 .c0 > div > div {