diff --git a/ui/src/components/TagSelector/index.tsx b/ui/src/components/TagSelector/index.tsx index b3cb4480c..3ce368198 100644 --- a/ui/src/components/TagSelector/index.tsx +++ b/ui/src/components/TagSelector/index.tsx @@ -18,10 +18,11 @@ */ /* eslint-disable no-nested-ternary */ -import { FC, useState, useEffect, useRef } from 'react'; +import { FC, useState, useEffect, useRef, useCallback } from 'react'; import { Dropdown, Button, Form } from 'react-bootstrap'; import { useTranslation } from 'react-i18next'; +import debounce from 'lodash/debounce'; import { marked } from 'marked'; import classNames from 'classnames'; @@ -69,7 +70,7 @@ const TagSelector: FC = ({ const [currentIndex, setCurrentIndex] = useState(0); const [repeatIndex, setRepeatIndex] = useState(-1); const [searchValue, setSearchValue] = useState(''); - const [tags, setTags] = useState(null); + const [tags, setTags] = useState([]); const [requiredTags, setRequiredTags] = useState(null); const { t } = useTranslation('translation', { keyPrefix: 'tag_selector' }); const { data: userPermission } = useUserPermission('tag.add'); @@ -146,20 +147,23 @@ const TagSelector: FC = ({ handleMenuShow(false); }; - const fetchTags = (str) => { - if (!showRequiredTag && !str) { - setTags([]); - return; - } - queryTags(str).then((res) => { - const tagArray: Type.Tag[] = filterTags(res || []); - if (str === '') { - setRequiredTags(res); + const fetchTags = useCallback( + debounce((str) => { + if (!showRequiredTag && !str) { + setTags([]); + return; } - handleMenuShow(tagArray.length > 0); - setTags(tagArray); - }); - }; + queryTags(str).then((res) => { + const tagArray: Type.Tag[] = filterTags(res || []); + if (str === '') { + setRequiredTags(res); + } + handleMenuShow(tagArray.length > 0); + setTags(tagArray); + }); + }, 400), + [], + ); const resetSearch = () => { setCurrentIndex(0);