diff --git a/gui/src/renderer/components/SearchBar.tsx b/gui/src/renderer/components/SearchBar.tsx index 40f4614dd94b..c38b6aa3cbc1 100644 --- 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; searchTerm: string; onSearch: (searchTerm: string) => void; className?: string; disableAutoFocus?: boolean; - hasLocationTypeChanged?: boolean; - resetLocationTypeChange?: () => void; } export default function SearchBar(props: ISearchBarProps) { const inputRef = useStyledRef(); + 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 ( {props.searchTerm.length > 0 && ( diff --git a/gui/src/renderer/components/select-location/SelectLocation.tsx b/gui/src/renderer/components/select-location/SelectLocation.tsx index e196e103c881..723668930f6b 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 { 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(); const changeLocationType = useCallback( (locationType: LocationType) => { + searchInputRef.current?.focus(); saveScrollPosition(); setLocationType(locationType); - notifyLocationTypeChange(); }, [saveScrollPosition], ); @@ -243,10 +242,9 @@ export default function SelectLocation() { )}