diff --git a/src/pages/RepoPage/BundlesTab/BundleContent/BundleSummary/BundleSelector.tsx b/src/pages/RepoPage/BundlesTab/BundleContent/BundleSummary/BundleSelector.tsx index 34d451060e..3627a9ff7e 100644 --- a/src/pages/RepoPage/BundlesTab/BundleContent/BundleSummary/BundleSelector.tsx +++ b/src/pages/RepoPage/BundlesTab/BundleContent/BundleSummary/BundleSelector.tsx @@ -1,4 +1,4 @@ -import { forwardRef, useState } from 'react' +import { forwardRef, useMemo, useState } from 'react' import { useHistory, useParams } from 'react-router-dom' import { useBranchBundlesNames } from 'services/bundleAnalysis' @@ -50,6 +50,7 @@ const BundleSelector = forwardRef(({}, ref) => { branch: branchParam, bundle, } = useParams() + const [selectedBundle, setSelectedBundle] = useState( () => { if (bundle) { @@ -77,8 +78,11 @@ const BundleSelector = forwardRef(({}, ref) => { // Note: There's no real way to test this as the data is resolved during // suspense and the component is not rendered until the data is resolved. - const bundles = bundleData?.bundles ?? [] - const [bundlesState, setBundlesState] = useState>(() => bundles) + const bundles = useMemo( + () => bundleData?.bundles ?? [], + [bundleData?.bundles] + ) + const [filteredBundles, setFilteredBundles] = useState>([]) return (
@@ -97,7 +101,7 @@ const BundleSelector = forwardRef(({}, ref) => { ariaName="bundle tab bundle selector" variant="gray" isLoading={bundlesIsLoading} - items={bundlesState} + items={search !== '' ? filteredBundles : bundles} value={selectedBundle ?? 'Select bundle'} onChange={(name: string) => { setSelectedBundle(name) @@ -115,13 +119,13 @@ const BundleSelector = forwardRef(({}, ref) => { onSearch={(term: string) => { setSearch(term) if (term !== '') { - setBundlesState( + setFilteredBundles( bundles.filter((bundle) => bundle.toLowerCase().includes(term.toLowerCase()) ) ) } else { - setBundlesState(bundles) + setFilteredBundles([]) } }} searchValue={search}