Autofocus location search bar when switching tabs

Fixes mullvad#6554

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 search bar when selecting a location type
 
 #### Windows
 - Add experimental support for Windows ARM64.

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 });
     }
-  }, []);
+
+    props.resetLocationTypeChange?.();
+  }, [props.hasLocationTypeChanged]);
 
   return (
     <StyledSearchContainer className={props.className}>

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}>