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