Handle search of length one as empty search

2 files changed, 18 insertions, 19 deletions

diff --git a/gui/src/renderer/components/select-location/RelayListContext.tsx b/gui/src/renderer/components/select-location/RelayListContext.tsx
index cbaf6113a6..b37cced8b5 100644
--- a/gui/src/renderer/components/select-location/RelayListContext.tsx
+++ b/gui/src/renderer/components/select-location/RelayListContext.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 
 import { compareRelayLocation, RelayLocation } from '../../../shared/daemon-rpc-types';
 import {
@@ -78,16 +78,8 @@ export function RelayListContextProvider(props: RelayListContextProviderProps) {
   }, [relaySettings?.ownership, relaySettings?.providers, relayListForEndpointType]);
 
   // Filters the relays based on the provided search term
-  const prevRelayListForSearch = useRef<Array<IRelayLocationRedux>>([]);
   const relayListForSearch = useMemo(() => {
-    // It shouldn't search for just one letter
-    if (searchTerm.length === 1) {
-      return prevRelayListForSearch.current;
-    }
-
-    const relayList = searchForLocations(relayListForFilters, searchTerm);
-    prevRelayListForSearch.current = relayList;
-    return relayList;
+    return searchForLocations(relayListForFilters, searchTerm);
   }, [relayListForFilters, searchTerm]);
 
   const {
@@ -236,7 +228,7 @@ function useExpandedLocations(filteredLocations: Array<IRelayLocationRedux>) {
     (searchTerm: string) => {
       if (searchTerm === '') {
         setExpandedLocations(defaultExpandedLocations(relaySettings, bridgeSettings));
-      } else if (searchTerm.length > 1) {
+      } else {
         setExpandedLocations((expandedLocations) => ({
           ...expandedLocations,
           [locationType]: getLocationsExpandedBySearch(filteredLocations, searchTerm),
@@ -248,8 +240,7 @@ function useExpandedLocations(filteredLocations: Array<IRelayLocationRedux>) {
 
   // Expand locations when filters are changed
   useEffect(() => {
-    // It shouldn't search for just one letter
-    if (searchTerm.length > 1) {
+    if (searchTerm !== '') {
       setExpandedLocations((expandedLocations) => ({
         ...expandedLocations,
         [locationType]: getLocationsExpandedBySearch(filteredLocations, searchTerm),
diff --git a/gui/src/renderer/components/select-location/SelectLocation.tsx b/gui/src/renderer/components/select-location/SelectLocation.tsx
index 67080f5c21..e129acc033 100644
--- a/gui/src/renderer/components/select-location/SelectLocation.tsx
+++ b/gui/src/renderer/components/select-location/SelectLocation.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { sprintf } from 'sprintf-js';
 
 import { colors } from '../../../config.json';
@@ -57,13 +57,15 @@ export default function SelectLocation() {
     scrollViewRef,
     spacePreAllocationViewRef,
   } = useScrollPositionContext();
-  const { locationType, setLocationType, searchTerm, setSearchTerm } = useSelectLocationContext();
+  const { locationType, setLocationType, setSearchTerm } = useSelectLocationContext();
   const { expandSearchResults } = useRelayListContext();
 
   const relaySettings = useNormalRelaySettings();
   const ownership = relaySettings?.ownership ?? Ownership.any;
   const providers = relaySettings?.providers ?? [];
 
+  const [searchValue, setSearchValue] = useState('');
+
   const onClose = useCallback(() => history.dismiss(), [history]);
   const onViewFilter = useCallback(() => history.push(RoutePath.filter), [history]);
 
@@ -93,9 +95,15 @@ export default function SelectLocation() {
 
   const updateSearchTerm = useCallback(
     (value: string) => {
-      resetScrollPositions();
-      expandSearchResults(value);
-      setSearchTerm(value);
+      setSearchValue(value);
+      if (value.length === 1) {
+        expandSearchResults('');
+        setSearchTerm('');
+      } else {
+        resetScrollPositions();
+        expandSearchResults(value);
+        setSearchTerm(value);
+      }
     },
     [resetScrollPositions, expandSearchResults],
   );
@@ -205,7 +213,7 @@ export default function SelectLocation() {
                 </StyledFilterRow>
               )}
 
-              <StyledSearchBar searchTerm={searchTerm} onSearch={updateSearchTerm} />
+              <StyledSearchBar searchTerm={searchValue} onSearch={updateSearchTerm} />
             </StyledNavigationBarAttachment>
 
             <NavigationScrollbars ref={scrollViewRef}>