diff --git a/src/components/TagPicker/index.js b/src/components/TagPicker/index.js index d6d49e3fe288..5fec06c325a6 100644 --- a/src/components/TagPicker/index.js +++ b/src/components/TagPicker/index.js @@ -37,25 +37,30 @@ function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, onSubm ]; }, [selectedTag]); + const enabledTags = useMemo(() => { + const sortedTagList = _.chain(policyTagList) + .values() + .sortBy((policyTag) => policyTag.name) + .value(); + + if (!shouldShowDisabledAndSelectedOption) { + return sortedTagList; + } + const selectedNames = _.map(selectedOptions, (s) => s.name); + return _.chain(sortedTagList) + .filter((policyTag) => policyTag.enabled || selectedNames.includes(policyTag.name)) + .value(); + }, [selectedOptions, policyTagList, shouldShowDisabledAndSelectedOption]); + const initialFocusedIndex = useMemo(() => { if (isTagsCountBelowThreshold && selectedOptions.length > 0) { - return _.chain(policyTagList) - .values() + return _.chain(enabledTags) .findIndex((policyTag) => policyTag.name === selectedOptions[0].name, true) .value(); } return 0; - }, [policyTagList, selectedOptions, isTagsCountBelowThreshold]); - - const enabledTags = useMemo(() => { - if (!shouldShowDisabledAndSelectedOption) { - return policyTagList; - } - const selectedNames = _.map(selectedOptions, (s) => s.name); - const tags = [...selectedOptions, ..._.filter(policyTagList, (policyTag) => policyTag.enabled && !selectedNames.includes(policyTag.name))]; - return tags; - }, [selectedOptions, policyTagList, shouldShowDisabledAndSelectedOption]); + }, [enabledTags, selectedOptions, isTagsCountBelowThreshold]); const sections = useMemo( () => OptionsListUtils.getFilteredOptions({}, {}, [], searchValue, selectedOptions, [], false, false, false, {}, [], true, enabledTags, policyRecentlyUsedTagsList, false).tagOptions,