Add setting for dropdown limit (#3459)

ui/v2.5/src/components/Settings/SettingsInterfacePanel/SettingsInterfacePanel.tsx

@@ -35,6 +35,7 @@ import {
   ratingSystemIntlMap,
   RatingSystemType,
 } from "src/utils/rating";
+import { defaultMaxOptionsShown } from "src/core/config";
 
 const allMenuItems = [
   { id: "scenes", headingID: "scenes" },
@@ -486,6 +487,12 @@ export const SettingsInterfacePanel: React.FC = () => {
             }
           />
         </div>
+        <NumberSetting
+          id="max_options_shown"
+          headingID="config.ui.editing.max_options_shown.label"
+          value={ui.maxOptionsShown ?? defaultMaxOptionsShown}
+          onChange={(v) => saveUI({ maxOptionsShown: v })}
+        />
         <SelectSetting
           id="rating_system"
           headingID="config.ui.editing.rating_system.type.label"

ui/v2.5/src/components/Shared/Select.tsx

@@ -30,6 +30,7 @@ import { useIntl } from "react-intl";
 import { objectTitle } from "src/core/files";
 import { galleryTitle } from "src/core/galleries";
 import { TagPopover } from "../Tags/TagPopover";
+import { defaultMaxOptionsShown, IUIConfig } from "src/core/config";
 
 export type SelectObject = {
   id: string;
@@ -131,7 +132,10 @@ const getSelectedValues = (selectedItems: OnChangeValue<Option, boolean>) =>
 const LimitedSelectMenu = <T extends boolean>(
   props: MenuListProps<Option, T, GroupBase<Option>>
 ) => {
-  const maxOptionsShown = 200;
+  const { configuration } = React.useContext(ConfigurationContext);
+  const maxOptionsShown =
+    (configuration?.ui as IUIConfig).maxOptionsShown ?? defaultMaxOptionsShown;
+
   const [hiddenCount, setHiddenCount] = useState<number>(0);
   const hiddenCountStyle = {
     padding: "8px 12px",
@@ -166,7 +170,7 @@ const LimitedSelectMenu = <T extends boolean>(
     }
     setHiddenCount(0);
     return props.children;
-  }, [props.children]);
+  }, [props.children, maxOptionsShown]);
   return (
     <reactSelectComponents.MenuList {...props}>
       {menuChildren}

ui/v2.5/src/core/config.ts

@@ -26,6 +26,8 @@ export interface ICustomFilter extends ITypename {
 
 export type FrontPageContent = ISavedFilterRow | ICustomFilter;
 
+export const defaultMaxOptionsShown = 200;
+
 export interface IUIConfig {
   frontPageContent?: FrontPageContent[];
 
@@ -45,6 +47,10 @@ export interface IUIConfig {
   // before the play count is incremented
   minimumPlayPercent?: number;
 
+  // maximum number of items to shown in the dropdown list - defaults to 200
+  // upper limit of 1000
+  maxOptionsShown?: number;
+
   lastNoteSeen?: number;
 }
 

ui/v2.5/src/docs/en/Changelog/v0200.md

@@ -1,7 +1,8 @@
 ##### 💥 Note: The cache directory is now required if using HLS streaming. Please set the cache directory in the System Settings page.
 
 ### ✨ New Features
-* Add configuration option to perform generation operations sequentially after scanning a new video file. ([#3378](https://github.com/stashapp/stash/pull/3378))
+* Added configuration option for the maximum number of items in selector drop-downs. ([#3277](https://github.com/stashapp/stash/pull/3277))
+* Added configuration option to perform generation operations sequentially after scanning a new video file. ([#3378](https://github.com/stashapp/stash/pull/3378))
 * Optionally show range in generated funscript heatmaps. ([#3373](https://github.com/stashapp/stash/pull/3373))
 * Show funscript heatmaps in scene player scrubber. ([#3374](https://github.com/stashapp/stash/pull/3374))
 * Support customising the filename regex used for determining the gallery cover image. ([#3391](https://github.com/stashapp/stash/pull/3391))

ui/v2.5/src/locales/en-GB.json

@@ -503,6 +503,9 @@
           "description": "Remove the ability to create new objects from the dropdown selectors",
           "heading": "Disable dropdown create"
         },
+        "max_options_shown": {
+          "label": "Maximum number of items to show in select dropdowns"
+        },
         "rating_system": {
           "type": {
             "label": "Rating System Type",