diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js index 74a639bb5..d7e373a10 100644 --- a/src/pages/observability-packs.js +++ b/src/pages/observability-packs.js @@ -44,7 +44,7 @@ const ObservabilityPacksPage = ({ data, location }) => { const [sortState, setSortState] = useState('Alphabetical'); const [searchTerm, setSearchTerm] = useState(''); const [view, setView] = useState(VIEWS.GRID); - const [searchOpen, setSearchOpen] = useState(false); + const [searchExpanded, setSearchExpanded] = useState(false); const [querySearch, setQuerySearch] = useQueryParam('search', StringParam); const [queryFilter, setQueryFilter] = useQueryParam('filter', StringParam); @@ -53,7 +53,7 @@ const ObservabilityPacksPage = ({ data, location }) => { const searchInputRef = useRef(); useKeyPress('s', () => { - setSearchOpen(!searchOpen); + setSearchExpanded(!searchExpanded); }); useInstrumentedData( @@ -91,7 +91,7 @@ const ObservabilityPacksPage = ({ data, location }) => { useEffect(() => { if (querySearch) { setSearchTerm(querySearch); - setSearchOpen(true); + setsearchExpanded(true); } if (queryFilter) { setContainingFilterState(queryFilter); @@ -107,10 +107,10 @@ const ObservabilityPacksPage = ({ data, location }) => { useEffect(() => { const duration = 500; - searchOpen + searchExpanded ? setTimeout(() => searchInputRef.current.focus(), duration) : setTimeout(() => searchInputRef.current.blur(), duration); - }, [searchOpen]); + }, [searchExpanded]); useEffect(() => { let tempFilteredPacks = o11yPacks.filter( @@ -137,10 +137,10 @@ const ObservabilityPacksPage = ({ data, location }) => { if (searchTerm !== '') { setQuerySearch(searchTerm); - setSearchOpen(true); + setSearchExpanded(true); } else { setQuerySearch(undefined); - setSearchOpen(false); + setSearchExpanded(false); } setQueryFilter(containingFilterState); setQuerySort(sortState); @@ -219,11 +219,11 @@ const ObservabilityPacksPage = ({ data, location }) => { } `} style={{ - width: `${searchOpen ? '300px' : '50px'}`, + width: `${searchExpanded ? '300px' : '50px'}`, transition: 'all 0.5s ease', }} > - {!searchOpen && ( + {!searchExpanded && ( @@ -240,12 +240,13 @@ const ObservabilityPacksPage = ({ data, location }) => { { setSearchTerm(''); - setSearchOpen(false); + setSearchExpanded(false); }} onChange={(e) => { setSearchTerm(e.target.value.toLowerCase());