Simplifying click-outside-of behavior, fixes #827

src/js/components/Fields/OutputControl.js

@@ -231,11 +231,6 @@ const Commands = () => {
 
 const OutputControl = ({ force_expanded }) => {
   const [expanded, setExpanded] = useState(false);
-  const handleClick = (e) => {
-    if (!force_expanded && $(e.target).closest('.output-control').length <= 0) {
-      setExpanded(false);
-    }
-  };
 
   useEffect(() => {
     if (force_expanded && !expanded) {
@@ -243,19 +238,12 @@ const OutputControl = ({ force_expanded }) => {
     }
   }, [force_expanded]);
 
-  useEffect(() => {
-    if (expanded) {
-      window.addEventListener('click', handleClick, false);
-    } else {
-      window.removeEventListener('click', handleClick, false);
-    }
-  }, [expanded]);
-
   if (expanded) {
     const outputs = <Outputs />;
     const commands = <Commands />;
     return (
       <span className="output-control">
+        {!force_expanded && <div className="click-outside" onClick={() => setExpanded(false)} />}
         <button
           className="control speakers active"
           onClick={() => setExpanded(false)}

src/js/components/LinksSentence.js

@@ -35,7 +35,7 @@ const LinksSentence = memo(({ items, itemType, className, nolinks }) => {
           }
 
           return (
-            <span key={`index_${uri}`}>
+            <span key={`index_${name || 'no-name'}_${uri || 'no-uri'}_index-${index}`}>
               {content}
               {separator}
             </span>

src/js/components/PlaybackControls.js

@@ -69,6 +69,7 @@ const PlaybackControls = () => {
   return (
     <div className={`playback-controls${expanded ? ' playback-controls--expanded' : ''}${touch_enabled ? ' playback-controls--touch-enabled' : ''}`}>
 
+      {expanded && <div className="click-outside" onClick={() => setExpanded(false)} /> }
       <div className="playback-controls__background" />
 
       {nextTrack && nextTrack.images ? <Thumbnail className="hide" size="large" images={nextTrack.images} /> : null}

src/scss/components/_playback-controls.scss

@@ -4,7 +4,6 @@
   bottom: 0;
   right: 0;
   left: 0;
-  transform-style: preserve-3d;
   display: flex;
   flex-flow: row;
   align-items: center;

src/scss/global/_core.scss

@@ -387,6 +387,15 @@ p {
   pointer-events: none !important;
 }
 
+.click-outside {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+}
+
 h1 .placeholder {
   width: 50%;
 }