diff --git a/ui/v2.5/src/components/Shared/Select.tsx b/ui/v2.5/src/components/Shared/Select.tsx index 7bd85eba0..4a88a17d1 100644 --- a/ui/v2.5/src/components/Shared/Select.tsx +++ b/ui/v2.5/src/components/Shared/Select.tsx @@ -6,6 +6,8 @@ import Select, { components as reactSelectComponents, GroupedOptionsType, OptionsType, + MenuListComponentProps, + GroupTypeBase, } from "react-select"; import CreatableSelect from "react-select/creatable"; import debounce from "lodash-es/debounce"; @@ -116,6 +118,55 @@ const getSelectedItems = (selectedItems: ValueType) => const getSelectedValues = (selectedItems: ValueType) => getSelectedItems(selectedItems).map((item) => item.value); +const LimitedSelectMenu = ( + props: MenuListComponentProps> +) => { + const maxOptionsShown = 200; + const [hiddenCount, setHiddenCount] = useState(0); + const hiddenCountStyle = { + padding: "8px 12px", + opacity: "50%", + }; + const menuChildren = useMemo(() => { + if (Array.isArray(props.children)) { + // limit the number of select options showing in the select dropdowns + // always showing the 'Create "..."' option when it exists + let creationOptionIndex = (props.children as React.ReactNodeArray).findIndex( + (child: React.ReactNode) => { + let maybeCreatableOption = child as React.ReactElement< + OptionProps< + Option & { __isNew__: boolean }, + T, + GroupTypeBase + >, + "" + >; + return maybeCreatableOption?.props?.data?.__isNew__; + } + ); + if (creationOptionIndex >= maxOptionsShown) { + setHiddenCount(props.children.length - maxOptionsShown - 1); + return props.children + .slice(0, maxOptionsShown - 1) + .concat([props.children[creationOptionIndex]]); + } else { + setHiddenCount(Math.max(props.children.length - maxOptionsShown, 0)); + return props.children.slice(0, maxOptionsShown); + } + } + setHiddenCount(0); + return props.children; + }, [props.children]); + return ( + + {menuChildren} + {hiddenCount > 0 && ( + {hiddenCount} Options Hidden + )} + + ); +}; + const SelectComponent = ({ type, initialIds, @@ -191,6 +242,7 @@ const SelectComponent = ({ menuPortalTarget, components: { ...components, + MenuList: LimitedSelectMenu, IndicatorSeparator: () => null, ...((!showDropdown || isDisabled) && { DropdownIndicator: () => null }), ...(isDisabled && { MultiValueRemove: () => null }),