From 75d0878c3b72239021673b4220f090ca9ac12894 Mon Sep 17 00:00:00 2001
From: MrChocolatine <47531779+MrChocolatine@users.noreply.github.com>
Date: Sun, 13 Oct 2024 14:41:23 +0100
Subject: [PATCH] Autofocus location search bar when switching tabs

Fixes #6554
---
 CHANGELOG.md                                       |  1 +
 gui/src/renderer/components/SearchBar.tsx          |  6 +++++-
 .../components/select-location/SelectLocation.tsx  | 14 ++++++++++++--
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5c64e5b5fad8..56db08f705b5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -27,6 +27,7 @@ Line wrap the file at 100 chars.                                              Th
   also be used automatically when connecting fails with other methods.
 - Add feature indicators to the main view along with redesigning the connection details.
 - Add "Smart Routing" feature which simplifies connecting to DAITA-enabled relays.
+- Autofocus the location search bar when switching tabs
 
 #### Windows
 - Add experimental support for Windows ARM64.
diff --git a/gui/src/renderer/components/SearchBar.tsx b/gui/src/renderer/components/SearchBar.tsx
index e21439fbbfff..40f4614dd94b 100644
--- a/gui/src/renderer/components/SearchBar.tsx
+++ b/gui/src/renderer/components/SearchBar.tsx
@@ -71,6 +71,8 @@ interface ISearchBarProps {
   onSearch: (searchTerm: string) => void;
   className?: string;
   disableAutoFocus?: boolean;
+  hasLocationTypeChanged?: boolean;
+  resetLocationTypeChange?: () => void;
 }
 
 export default function SearchBar(props: ISearchBarProps) {
@@ -93,7 +95,9 @@ export default function SearchBar(props: ISearchBarProps) {
     if (!props.disableAutoFocus) {
       inputRef.current?.focus({ preventScroll: true });
     }
-  }, []);
+
+    return () => props.resetLocationTypeChange?.();
+  }, [props.hasLocationTypeChanged]);
 
   return (
     <StyledSearchContainer className={props.className}>
diff --git a/gui/src/renderer/components/select-location/SelectLocation.tsx b/gui/src/renderer/components/select-location/SelectLocation.tsx
index 9cd66f98f435..b51babae5c46 100644
--- a/gui/src/renderer/components/select-location/SelectLocation.tsx
+++ b/gui/src/renderer/components/select-location/SelectLocation.tsx
@@ -9,7 +9,7 @@ import { daitaFilterActive, filterSpecialLocations } from '../../lib/filter-loca
 import { useHistory } from '../../lib/history';
 import { formatHtml } from '../../lib/html-formatter';
 import { RoutePath } from '../../lib/routes';
-import { useNormalRelaySettings } from '../../lib/utilityHooks';
+import { useBoolean, useNormalRelaySettings } from '../../lib/utilityHooks';
 import { useSelector } from '../../redux/store';
 import * as Cell from '../cell';
 import { useFilteredProviders } from '../Filter';
@@ -104,10 +104,14 @@ export default function SelectLocation() {
     }
   }, [relaySettingsUpdater, resetScrollPositions, relaySettings]);
 
+  const [hasLocationTypeChanged, notifyLocationTypeChange, resetLocationTypeChange] =
+    useBoolean(false);
+
   const changeLocationType = useCallback(
     (locationType: LocationType) => {
       saveScrollPosition();
       setLocationType(locationType);
+      notifyLocationTypeChange();
     },
     [saveScrollPosition],
   );
@@ -130,6 +134,7 @@ export default function SelectLocation() {
   const showOwnershipFilter = ownership !== Ownership.any;
   const showProvidersFilter = providers.length > 0;
   const showFilters = showOwnershipFilter || showProvidersFilter || showDaitaFilter;
+
   return (
     <BackAction action={onClose}>
       <Layout>
@@ -239,7 +244,12 @@ export default function SelectLocation() {
                 </StyledFilterRow>
               )}
 
-              <StyledSearchBar searchTerm={searchValue} onSearch={updateSearchTerm} />
+              <StyledSearchBar
+                searchTerm={searchValue}
+                onSearch={updateSearchTerm}
+                hasLocationTypeChanged={hasLocationTypeChanged}
+                resetLocationTypeChange={resetLocationTypeChange}
+              />
             </StyledNavigationBarAttachment>
 
             <NavigationScrollbars ref={scrollViewRef}>