Rework logic using ref objects

mullvad · Oct 13, 2024 · ae9dfbc · ae9dfbc
1 parent dc59c27
commit ae9dfbc
Show file tree

Hide file tree

Showing 2 changed files with 11 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';
 
@@ -71,12 +71,12 @@ interface ISearchBarProps {
   onSearch: (searchTerm: string) => void;
   className?: string;
   disableAutoFocus?: boolean;
-  hasLocationTypeChanged?: boolean;
-  resetLocationTypeChange?: () => void;
+  searchInputRef?: React.Ref<HTMLInputElement>;
 }
 
 export default function SearchBar(props: ISearchBarProps) {
   const inputRef = useStyledRef<HTMLInputElement>();
+  const combinedRef = useCombinedRefs(inputRef, props.searchInputRef);
 
   const onInput = useCallback(
     (event: React.FormEvent) => {
@@ -95,14 +95,12 @@ 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}
+        ref={combinedRef}
         value={props.searchTerm}
         onInput={onInput}
         placeholder={messages.gettext('Search for...')}

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';
@@ -104,14 +104,15 @@ export default function SelectLocation() {
     }
   }, [relaySettingsUpdater, resetScrollPositions, relaySettings]);
 
-  const [hasLocationTypeChanged, notifyLocationTypeChange, resetLocationTypeChange] =
-    useBoolean(false);
+  const searchInputRef = useStyledRef<HTMLInputElement>();
 
   const changeLocationType = useCallback(
     (locationType: LocationType) => {
       saveScrollPosition();
       setLocationType(locationType);
-      notifyLocationTypeChange();
+
+      console.log('### changeLocationType | searchInputRef.current', searchInputRef.current);
+      searchInputRef.current?.focus();
     },
     [saveScrollPosition],
   );
@@ -247,8 +248,7 @@ export default function SelectLocation() {
               <StyledSearchBar
                 searchTerm={searchValue}
                 onSearch={updateSearchTerm}
-                hasLocationTypeChanged={hasLocationTypeChanged}
-                resetLocationTypeChange={resetLocationTypeChange}
+                searchInputRef={searchInputRef}
               />
             </StyledNavigationBarAttachment>