Rework logic using ref objects

Fixes #6554
mullvad · Oct 13, 2024 · eb45c2e · eb45c2e
1 parent defd523
commit eb45c2e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 13 deletions.
diff --git a/gui/src/renderer/components/SearchBar.tsx b/gui/src/renderer/components/SearchBar.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
-import { useStyledRef } from '../lib/utilityHooks';
+import { useCombinedRefs, useStyledRef } from '../lib/utilityHooks';
 import { normalText } from './common-styles';
 import ImageView from './ImageView';
 
@@ -67,16 +67,16 @@ export const StyledClearIcon = styled(ImageView)({
 });
 
 interface ISearchBarProps {
+  searchInputRef?: React.Ref<HTMLInputElement>;
   searchTerm: string;
   onSearch: (searchTerm: string) => void;
   className?: string;
   disableAutoFocus?: boolean;
-  hasLocationTypeChanged?: boolean;
-  resetLocationTypeChange?: () => void;
 }
 
 export default function SearchBar(props: ISearchBarProps) {
   const inputRef = useStyledRef<HTMLInputElement>();
+  const combinedRef = useCombinedRefs(inputRef, props.searchInputRef);
 
   const onInput = useCallback(
     (event: React.FormEvent) => {
@@ -95,17 +95,15 @@ export default function SearchBar(props: ISearchBarProps) {
     if (!props.disableAutoFocus) {
       inputRef.current?.focus({ preventScroll: true });
     }
-
-    return () => props.resetLocationTypeChange?.();
-  }, [props.hasLocationTypeChanged]);
+  }, []);
 
   return (
     <StyledSearchContainer className={props.className}>
       <StyledSearchInput
-        ref={inputRef}
         value={props.searchTerm}
         onInput={onInput}
         placeholder={messages.gettext('Search for...')}
+        ref={combinedRef}
       />
       <StyledSearchIcon source="icon-search" width={24} tintColor={colors.white60} />
       {props.searchTerm.length > 0 && (

diff --git 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 { useBoolean, useNormalRelaySettings } from '../../lib/utilityHooks';
+import { useNormalRelaySettings, useStyledRef } from '../../lib/utilityHooks';
 import { useSelector } from '../../redux/store';
 import * as Cell from '../cell';
 import { useFilteredProviders } from '../Filter';
@@ -102,14 +102,13 @@ export default function SelectLocation() {
     }
   }, [relaySettingsUpdater, resetScrollPositions, relaySettings]);
 
-  const [hasLocationTypeChanged, notifyLocationTypeChange, resetLocationTypeChange] =
-    useBoolean(false);
+  const searchInputRef = useStyledRef<HTMLInputElement>();
 
   const changeLocationType = useCallback(
     (locationType: LocationType) => {
+      searchInputRef.current?.focus();
       saveScrollPosition();
       setLocationType(locationType);
-      notifyLocationTypeChange();
     },
     [saveScrollPosition],
   );
@@ -243,10 +242,9 @@ export default function SelectLocation() {
               )}
 
               <StyledSearchBar
+                searchInputRef={searchInputRef}
                 searchTerm={searchValue}
                 onSearch={updateSearchTerm}
-                hasLocationTypeChanged={hasLocationTypeChanged}
-                resetLocationTypeChange={resetLocationTypeChange}
               />
             </StyledNavigationBarAttachment>