Add portals for selects in dialogs (#5253)

stashapp · Sep 11, 2024 · 5c4bf4e · 5c4bf4e
1 parent 17be7e9
commit 5c4bf4e
Show file tree

Hide file tree

Showing 10 changed files with 24 additions and 0 deletions.
diff --git a/ui/v2.5/src/components/Dialogs/IdentifyDialog/Options.tsx b/ui/v2.5/src/components/Dialogs/IdentifyDialog/Options.tsx
@@ -63,6 +63,7 @@ export const OptionsEditor: React.FC<IOptionsEditor> = ({
               options.skipMultipleMatchTag ? [options.skipMultipleMatchTag] : []
             }
             noSelectionString="Select/create tag..."
+            menuPortalTarget={document.body}
           />
         </Col>
       </Form.Group>
@@ -98,6 +99,7 @@ export const OptionsEditor: React.FC<IOptionsEditor> = ({
                 : []
             }
             noSelectionString="Select/create tag..."
+            menuPortalTarget={document.body}
           />
         </Col>
       </Form.Group>

diff --git a/ui/v2.5/src/components/Galleries/EditGalleriesDialog.tsx b/ui/v2.5/src/components/Galleries/EditGalleriesDialog.tsx
@@ -211,6 +211,7 @@ export const EditGalleriesDialog: React.FC<IListOperationProps> = (
         existingIds={existingIds ?? []}
         ids={ids ?? []}
         mode={mode}
+        menuPortalTarget={document.body}
       />
     );
   }
@@ -273,6 +274,7 @@ export const EditGalleriesDialog: React.FC<IListOperationProps> = (
                 }
                 ids={studioId ? [studioId] : []}
                 isDisabled={isUpdating}
+                menuPortalTarget={document.body}
               />
             </Col>
           </Form.Group>

diff --git a/ui/v2.5/src/components/Groups/ContainingGroupsMultiSet.tsx b/ui/v2.5/src/components/Groups/ContainingGroupsMultiSet.tsx
@@ -14,6 +14,7 @@ export const ContainingGroupsMultiSet: React.FC<{
   disabled?: boolean;
   onUpdate: (value: IRelatedGroupEntry[]) => void;
   onSetMode: (mode: GQL.BulkUpdateIdMode) => void;
+  menuPortalTarget?: HTMLElement | null;
 }> = (props) => {
   const { mode, onUpdate, existingValue } = props;
 
@@ -48,12 +49,14 @@ export const ContainingGroupsMultiSet: React.FC<{
           value={props.value}
           onUpdate={props.onUpdate}
           disabled={props.disabled}
+          menuPortalTarget={props.menuPortalTarget}
         />
       ) : (
         <GroupSelect
           onSelect={(items) => onRemoveSet(items)}
           values={[]}
           isDisabled={props.disabled}
+          menuPortalTarget={props.menuPortalTarget}
         />
       )}
     </div>

diff --git a/ui/v2.5/src/components/Groups/EditGroupsDialog.tsx b/ui/v2.5/src/components/Groups/EditGroupsDialog.tsx
@@ -227,6 +227,7 @@ export const EditGroupsDialog: React.FC<IListOperationProps> = (
                 }
                 ids={studioId ? [studioId] : []}
                 isDisabled={isUpdating}
+                menuPortalTarget={document.body}
               />
             </Col>
           </Form.Group>
@@ -241,6 +242,7 @@ export const EditGroupsDialog: React.FC<IListOperationProps> = (
               existingValue={existingContainingGroups ?? []}
               value={containingGroups ?? []}
               mode={containingGroupsMode}
+              menuPortalTarget={document.body}
             />
           </Form.Group>
           <Form.Group controlId="director">
@@ -267,6 +269,7 @@ export const EditGroupsDialog: React.FC<IListOperationProps> = (
               existingIds={existingTagIds ?? []}
               ids={tagIds ?? []}
               mode={tagMode}
+              menuPortalTarget={document.body}
             />
           </Form.Group>
         </Form>

diff --git a/ui/v2.5/src/components/Groups/GroupDetails/RelatedGroupTable.tsx b/ui/v2.5/src/components/Groups/GroupDetails/RelatedGroupTable.tsx
@@ -19,6 +19,7 @@ export const RelatedGroupTable: React.FC<{
   excludeIDs?: string[];
   filterHook?: (f: ListFilterModel) => ListFilterModel;
   disabled?: boolean;
+  menuPortalTarget?: HTMLElement | null;
 }> = (props) => {
   const { value, onUpdate } = props;
 
@@ -101,6 +102,7 @@ export const RelatedGroupTable: React.FC<{
               excludeIds={excludeIDs}
               filterHook={props.filterHook}
               isDisabled={props.disabled}
+              menuPortalTarget={props.menuPortalTarget}
             />
           </Col>
           <Col xs={3}>
@@ -129,6 +131,7 @@ export const RelatedGroupTable: React.FC<{
             excludeIds={excludeIDs}
             filterHook={props.filterHook}
             isDisabled={props.disabled}
+            menuPortalTarget={props.menuPortalTarget}
           />
         </Col>
       </Row>

diff --git a/ui/v2.5/src/components/Images/EditImagesDialog.tsx b/ui/v2.5/src/components/Images/EditImagesDialog.tsx
@@ -237,6 +237,7 @@ export const EditImagesDialog: React.FC<IListOperationProps> = (
                 }
                 ids={studioId ? [studioId] : []}
                 isDisabled={isUpdating}
+                menuPortalTarget={document.body}
               />
             </Col>
           </Form.Group>
@@ -253,6 +254,7 @@ export const EditImagesDialog: React.FC<IListOperationProps> = (
               existingIds={existingPerformerIds ?? []}
               ids={performerIds ?? []}
               mode={performerMode}
+              menuPortalTarget={document.body}
             />
           </Form.Group>
 
@@ -268,6 +270,7 @@ export const EditImagesDialog: React.FC<IListOperationProps> = (
               existingIds={existingTagIds ?? []}
               ids={tagIds ?? []}
               mode={tagMode}
+              menuPortalTarget={document.body}
             />
           </Form.Group>
 
@@ -283,6 +286,7 @@ export const EditImagesDialog: React.FC<IListOperationProps> = (
               existingIds={existingGalleryIds ?? []}
               ids={galleryIds ?? []}
               mode={galleryMode}
+              menuPortalTarget={document.body}
             />
           </Form.Group>
 

diff --git a/ui/v2.5/src/components/Performers/EditPerformersDialog.tsx b/ui/v2.5/src/components/Performers/EditPerformersDialog.tsx
@@ -369,6 +369,7 @@ export const EditPerformersDialog: React.FC<IListOperationProps> = (
               existingIds={existingTagIds ?? []}
               ids={tagIds.ids ?? []}
               mode={tagIds.mode}
+              menuPortalTarget={document.body}
             />
           </Form.Group>
 

diff --git a/ui/v2.5/src/components/Scenes/EditScenesDialog.tsx b/ui/v2.5/src/components/Scenes/EditScenesDialog.tsx
@@ -226,6 +226,7 @@ export const EditScenesDialog: React.FC<IListOperationProps> = (
         ids={ids ?? []}
         existingIds={existingIds ?? []}
         mode={mode}
+        menuPortalTarget={document.body}
       />
     );
   }
@@ -288,6 +289,7 @@ export const EditScenesDialog: React.FC<IListOperationProps> = (
                 }
                 ids={studioId ? [studioId] : []}
                 isDisabled={isUpdating}
+                menuPortalTarget={document.body}
               />
             </Col>
           </Form.Group>

diff --git a/ui/v2.5/src/components/Shared/MultiSet.tsx b/ui/v2.5/src/components/Shared/MultiSet.tsx
@@ -17,6 +17,7 @@ interface IMultiSetProps {
   disabled?: boolean;
   onUpdate: (ids: string[]) => void;
   onSetMode: (mode: GQL.BulkUpdateIdMode) => void;
+  menuPortalTarget?: HTMLElement | null;
 }
 
 const Select: React.FC<IMultiSetProps> = (props) => {
@@ -36,6 +37,7 @@ const Select: React.FC<IMultiSetProps> = (props) => {
         ids={props.ids ?? []}
         // exclude file-based galleries when setting galleries
         extraCriteria={excludeFileBasedGalleries}
+        menuPortalTarget={props.menuPortalTarget}
       />
     );
   }
@@ -48,6 +50,7 @@ const Select: React.FC<IMultiSetProps> = (props) => {
       isClearable={false}
       onSelect={onUpdate}
       ids={props.ids ?? []}
+      menuPortalTarget={props.menuPortalTarget}
     />
   );
 };

diff --git a/ui/v2.5/src/components/Tags/EditTagsDialog.tsx b/ui/v2.5/src/components/Tags/EditTagsDialog.tsx
@@ -48,6 +48,7 @@ function Tags(props: {
         existingIds={existingTagIds ?? []}
         ids={tagIDs.ids ?? []}
         mode={tagIDs.mode}
+        menuPortalTarget={document.body}
       />
     </Form.Group>
   );