Add refs for picker components

src/components/library/AlbumList.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import _ from 'lodash';
 import settings from 'electron-settings';
 import { ButtonToolbar } from 'rsuite';
@@ -18,7 +18,7 @@ import {
   toggleRangeSelected,
   clearSelected,
 } from '../../redux/multiSelectSlice';
-import { StyledInputPicker } from '../shared/styled';
+import { StyledInputPicker, StyledInputPickerContainer } from '../shared/styled';
 import { RefreshButton } from '../shared/ToolbarButtons';
 import { setActive } from '../../redux/albumSlice';
 
@@ -42,6 +42,7 @@ const AlbumList = () => {
   const [sortTypes, setSortTypes] = useState<any[]>();
   const [viewType, setViewType] = useState(settings.getSync('albumViewType'));
   const [musicFolder, setMusicFolder] = useState(undefined);
+  const albumFilterPickerContainerRef = useRef(null);
 
   useEffect(() => {
     if (folder.applied.albums) {
@@ -150,8 +151,10 @@ const AlbumList = () => {
         <GenericPageHeader
           title="Albums"
           subtitle={
+            <StyledInputPickerContainer ref={albumFilterPickerContainerRef}>
               <ButtonToolbar>
                 <StyledInputPicker
+                  container={() => albumFilterPickerContainerRef.current}
                   size="sm"
                   width={180}
                   defaultValue={album.active.filter}
@@ -160,13 +163,24 @@ const AlbumList = () => {
                   cleanable={false}
                   placeholder="Sort Type"
                   onChange={async (value: string) => {
-                  await queryClient.cancelQueries(['albumList', album.active.filter, musicFolder]);
+                    await queryClient.cancelQueries([
+                      'albumList',
+                      album.active.filter,
+                      musicFolder,
+                    ]);
                     setSearchQuery('');
                     dispatch(setActive({ ...album.active, filter: value }));
                   }}
                 />
-              <RefreshButton onClick={handleRefresh} size="sm" loading={isRefreshing} width={100} />
+
+                <RefreshButton
+                  onClick={handleRefresh}
+                  size="sm"
+                  loading={isRefreshing}
+                  width={100}
+                />
               </ButtonToolbar>
+            </StyledInputPickerContainer>
           }
           subsidetitle={<></>}
           searchQuery={searchQuery}

src/components/library/FolderList.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import settings from 'electron-settings';
 import _ from 'lodash';
 import { useQuery, useQueryClient } from 'react-query';
@@ -23,7 +23,7 @@ import {
 } from '../../redux/multiSelectSlice';
 import GenericPage from '../layout/GenericPage';
 import GenericPageHeader from '../layout/GenericPageHeader';
-import { StyledButton, StyledInputPicker } from '../shared/styled';
+import { StyledButton, StyledInputPicker, StyledInputPickerContainer } from '../shared/styled';
 import { fixPlayer2Index, setPlayQueueByRowClick, setRate } from '../../redux/playQueueSlice';
 import { setStatus } from '../../redux/playerSlice';
 import useSearchQuery from '../../hooks/useSearchQuery';
@@ -37,6 +37,7 @@ const FolderList = () => {
   const queryClient = useQueryClient();
   const folder = useAppSelector((state) => state.folder);
   const [musicFolder, setMusicFolder] = useState(folder.musicFolder);
+  const folderPickerContainerRef = useRef(null);
 
   const { isLoading, isError, data: indexData, error }: any = useQuery(
     ['indexes', musicFolder],
@@ -163,8 +164,12 @@ const FolderList = () => {
               showTitleTooltip
               subtitle={
                 <>
+                  <StyledInputPickerContainer ref={folderPickerContainerRef}>
                     <ButtonToolbar>
                       <StyledInputPicker
+                        container={() => folderPickerContainerRef.current}
+                        size="sm"
+                        width={180}
                         data={musicFolders}
                         defaultValue={musicFolder}
                         valueKey="id"
@@ -172,14 +177,15 @@ const FolderList = () => {
                         onChange={(e: any) => {
                           setMusicFolder(e);
                         }}
-                      style={{ width: '250px' }}
                       />
 
                       <StyledButton
                         size="sm"
                         onClick={() => {
                           history.push(
-                          `/library/folder?folderId=${folderData?.parent ? folderData.parent : ''}`
+                            `/library/folder?folderId=${
+                              folderData?.parent ? folderData.parent : ''
+                            }`
                           );
                           dispatch(
                             setCurrentViewedFolder(folderData?.parent ? folderData.parent : '')
@@ -190,6 +196,7 @@ const FolderList = () => {
                         Go up
                       </StyledButton>
                     </ButtonToolbar>
+                  </StyledInputPickerContainer>
                 </>
               }
             />

src/components/settings/ConfigPanels/ListViewConfig.tsx

@@ -1,8 +1,13 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { nanoid } from 'nanoid/non-secure';
 import settings from 'electron-settings';
 import { ControlLabel } from 'rsuite';
-import { StyledInputNumber, StyledPanel, StyledTagPicker } from '../../shared/styled';
+import {
+  StyledInputNumber,
+  StyledInputPickerContainer,
+  StyledPanel,
+  StyledTagPicker,
+} from '../../shared/styled';
 import ListViewTable from '../../viewtypes/ListViewTable';
 import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
 import {
@@ -53,6 +58,7 @@ const ListViewConfig = ({ defaultColumns, columnPicker, columnList, settingsConf
   const config = useAppSelector((state) => state.config);
   const [selectedColumns, setSelectedColumns] = useState([]);
   const columnListType = settingsConfig.columnList.split('List')[0];
+  const columnPickerContainerRef = useRef(null);
 
   useEffect(() => {
     const cols = config.lookAndFeel.listView[columnListType].columns.map((col: any) => {
@@ -100,7 +106,9 @@ const ListViewConfig = ({ defaultColumns, columnPicker, columnList, settingsConf
     <div style={{ width: '100%' }}>
       <div>
         <StyledPanel bordered bodyFill>
+          <StyledInputPickerContainer ref={columnPickerContainerRef}>
             <StyledTagPicker
+              container={() => columnPickerContainerRef.current}
               data={columnPicker}
               defaultValue={defaultColumns}
               value={selectedColumns}
@@ -140,6 +148,7 @@ const ListViewConfig = ({ defaultColumns, columnPicker, columnList, settingsConf
               labelKey="label"
               valueKey="label"
             />
+          </StyledInputPickerContainer>
 
           <ListViewTable
             data={config.lookAndFeel.listView[columnListType].columns || []}

src/components/settings/ConfigPanels/LookAndFeelConfig.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import settings from 'electron-settings';
 import { RadioGroup, ControlLabel, Nav } from 'rsuite';
 import { ConfigPanel } from '../styled';
@@ -8,6 +8,7 @@ import {
   StyledNavItem,
   StyledInputNumber,
   StyledCheckbox,
+  StyledInputPickerContainer,
 } from '../../shared/styled';
 import ListViewConfig from './ListViewConfig';
 import { Fonts } from '../Fonts';
@@ -36,6 +37,8 @@ const LookAndFeelConfig = () => {
   const [highlightOnRowHoverChk, setHighlightOnRowHoverChk] = useState(
     Boolean(settings.getSync('highlightOnRowHover'))
   );
+  const fontPickerContainerRef = useRef(null);
+  const titleBarPickerContainerRef = useRef(null);
 
   const songCols: any = settings.getSync('musicListColumns');
   const albumCols: any = settings.getSync('albumListColumns');
@@ -67,10 +70,14 @@ const LookAndFeelConfig = () => {
             <StyledRadio value="defaultDark">Default Dark</StyledRadio>
             <StyledRadio value="defaultLight">Default Light</StyledRadio>
           </RadioGroup>
+        </div>
         <br />
+
+        <StyledInputPickerContainer ref={fontPickerContainerRef}>
           <ControlLabel>Font</ControlLabel>
           <br />
           <StyledInputPicker
+            container={() => fontPickerContainerRef.current}
             data={Fonts}
             groupBy="role"
             cleanable={false}
@@ -80,12 +87,13 @@ const LookAndFeelConfig = () => {
               dispatch(setFont(e));
             }}
           />
-        </div>
+        </StyledInputPickerContainer>
         <br />
-        <div>
+        <StyledInputPickerContainer ref={titleBarPickerContainerRef}>
           <ControlLabel>Titlebar style (requires app restart)</ControlLabel>
           <br />
           <StyledInputPicker
+            container={() => titleBarPickerContainerRef.current}
             data={[
               {
                 label: 'macOS',
@@ -103,7 +111,7 @@ const LookAndFeelConfig = () => {
               dispatch(setMiscSetting({ setting: 'titleBar', value: e }));
             }}
           />
-        </div>
+        </StyledInputPickerContainer>
         <br />
         <StyledCheckbox
           defaultChecked={dynamicBackgroundChk}

src/components/settings/ConfigPanels/PlaybackConfig.tsx

@@ -1,14 +1,21 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import settings from 'electron-settings';
 import { ControlLabel, RadioGroup } from 'rsuite';
 import { ConfigPanel } from '../styled';
-import { StyledInputNumber, StyledInputPicker, StyledRadio } from '../../shared/styled';
+import {
+  StyledInputNumber,
+  StyledInputPicker,
+  StyledInputPickerContainer,
+  StyledRadio,
+} from '../../shared/styled';
 import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
 import { setPlaybackSetting, setPlayerVolume } from '../../../redux/playQueueSlice';
 
 const PlaybackConfig = () => {
   const dispatch = useAppDispatch();
   const playQueue = useAppSelector((state) => state.playQueue);
+  const crossfadePickerContainerRef = useRef(null);
+
   return (
     <ConfigPanel header="Playback" bordered>
       <p>
@@ -77,10 +84,11 @@ const PlaybackConfig = () => {
           }}
         />
         <br />
-        <div>
+        <StyledInputPickerContainer ref={crossfadePickerContainerRef}>
           <ControlLabel>Crossfade type</ControlLabel>
           <br />
           <StyledInputPicker
+            container={() => crossfadePickerContainerRef.current}
             data={[
               {
                 label: 'Equal Power',
@@ -118,7 +126,7 @@ const PlaybackConfig = () => {
               dispatch(setPlaybackSetting({ setting: 'fadeType', value: e }));
             }}
           />
-        </div>
+        </StyledInputPickerContainer>
 
         <br />
         <ControlLabel>Volume fade</ControlLabel>

src/components/settings/ConfigPanels/ServerConfig.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import settings from 'electron-settings';
 import { useQuery } from 'react-query';
 import { CheckboxGroup } from 'rsuite';
 import { ConfigPanel } from '../styled';
-import { StyledCheckbox, StyledInputPicker } from '../../shared/styled';
+import { StyledCheckbox, StyledInputPicker, StyledInputPickerContainer } from '../../shared/styled';
 import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
 import { getMusicFolders } from '../../../api/api';
 import { setAppliedFolderViews, setMusicFolder } from '../../../redux/folderSlice';
@@ -12,12 +12,15 @@ const ServerConfig = () => {
   const dispatch = useAppDispatch();
   const folder = useAppSelector((state) => state.folder);
   const { isLoading, data: musicFolders } = useQuery(['musicFolders'], getMusicFolders);
+  const musicFolderPickerContainerRef = useRef(null);
 
   return (
     <ConfigPanel header="Server" bordered>
       <p>Select a music folder (leaving this blank will use all folders).</p>
       <br />
+      <StyledInputPickerContainer ref={musicFolderPickerContainerRef}>
         <StyledInputPicker
+          container={() => musicFolderPickerContainerRef.current}
           data={isLoading ? [] : musicFolders}
           defaultValue={folder.musicFolder}
           valueKey="id"
@@ -27,6 +30,8 @@ const ServerConfig = () => {
             dispatch(setMusicFolder(e));
           }}
         />
+      </StyledInputPickerContainer>
+
       <div>
         <br />
         <p>Select which pages to apply music folder filtering to:</p>

src/components/shared/ContextMenu.tsx

@@ -109,6 +109,7 @@ export const GlobalContextMenu = () => {
   const [shouldCreatePlaylist, setShouldCreatePlaylist] = useState(false);
   const [newPlaylistName, setNewPlaylistName] = useState('');
   const [indexToMoveTo, setIndexToMoveTo] = useState(0);
+  const playlistPickerContainerRef = useRef(null);
 
   const { data: playlists }: any = useQuery(['playlists', 'name'], () => getPlaylists('name'));
 

src/components/shared/styled.ts

@@ -337,10 +337,6 @@ export const StyledInputPicker = styled(InputPicker)<{ width?: number }>`
     border-radius: ${(props) => props.theme.other.input.borderRadius};
   }
 
-  .rs-picker-select-menu-item {
-    background: ${(props) => `${props.theme.colors.background.input} !important`};
-  }
-
   .rs-btn-default {
     background: ${(props) => `${props.theme.colors.input.background} !important`};
   }

src/components/viewtypes/ViewTypeButtons.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import { ButtonToolbar, ButtonGroup, Icon } from 'rsuite';
+import { ButtonToolbar, Icon } from 'rsuite';
 import settings from 'electron-settings';
 import { StyledIconButton } from '../shared/styled';
 
 const ViewTypeButtons = ({ handleListClick, handleGridClick, viewTypeSetting }: any) => {
   return (
     <ButtonToolbar>
-      <ButtonGroup>
       <StyledIconButton
         icon={<Icon icon="list" />}
+        size="sm"
         appearance="subtle"
         onClick={async () => {
           handleListClick();
@@ -18,6 +18,7 @@ const ViewTypeButtons = ({ handleListClick, handleGridClick, viewTypeSetting }:
       />
       <StyledIconButton
         icon={<Icon icon="th-large" />}
+        size="sm"
         appearance="subtle"
         onClick={async () => {
           handleGridClick();
@@ -25,7 +26,6 @@ const ViewTypeButtons = ({ handleListClick, handleGridClick, viewTypeSetting }:
           settings.setSync(`${viewTypeSetting}ViewType`, 'grid');
         }}
       />
-      </ButtonGroup>
     </ButtonToolbar>
   );
 };

src/styles/App.global.css

@@ -57,6 +57,12 @@ body {
 }
  */
 
+/* Fixes the picker menu position */
+.rs-picker-menu {
+  left: inherit !important;
+  top: inherit !important;
+}
+
 *::-webkit-scrollbar {
   width: 10px;
 }

src/styles/custom-theme.less

@@ -45,6 +45,7 @@
 @table-head-font-color: undefined;
 @table-resize-mouse-color: #292d33;
 @table-sort-icon-unsort: '';
+@zindex-table-header-row-wrapper: 0;
 
 // Sidenav
 @sidenav-default-bg: undefined;