From 14d7a690886b0ebee818d1fe29145e66cb02343c Mon Sep 17 00:00:00 2001
From: Deluan <deluan@deluan.com>
Date: Sat, 30 May 2020 11:18:01 -0400
Subject: [PATCH] Fix context menu "display on hover" in playlists

---
 ui/src/common/SongDatagrid.js | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/ui/src/common/SongDatagrid.js b/ui/src/common/SongDatagrid.js
index 13ba206a3..797b32503 100644
--- a/ui/src/common/SongDatagrid.js
+++ b/ui/src/common/SongDatagrid.js
@@ -70,7 +70,10 @@ export const SongDatagridRow = ({
   ...rest
 }) => {
   const [visible, setVisible] = useState(false)
-  const childCount = children.filter((c) => isValidElement(c)).length
+  const fields = React.Children.toArray(children).filter((c) =>
+    isValidElement(c)
+  )
+  const childCount = fields.length
   return (
     <>
       {multiDisc && record.trackNumber === 1 && (
@@ -87,16 +90,12 @@ export const SongDatagridRow = ({
         onMouseLeave={() => setVisible(false)}
         {...rest}
       >
-        {React.Children.map(
-          children,
-          (child, index) =>
-            child &&
-            isValidElement(child) &&
-            (index < childCount
-              ? child
-              : cloneElement(child, {
-                  visible: contextAlwaysVisible || visible,
-                }))
+        {fields.map((child, index) =>
+          index < childCount - 1
+            ? child
+            : cloneElement(child, {
+                visible: contextAlwaysVisible || visible,
+              })
         )}
       </DatagridRow>
     </>