diff --git a/CHANGELOG.md b/CHANGELOG.md index 795f61da7d2e..e7a3e419d995 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -56,6 +56,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 #### macOS - Add "Apple services bypass" toggle that let's users unblock certain Apple-owned networks. diff --git a/gui/src/renderer/components/SearchBar.tsx b/gui/src/renderer/components/SearchBar.tsx index e21439fbbfff..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,6 +67,7 @@ export const StyledClearIcon = styled(ImageView)({ }); interface ISearchBarProps { + searchInputRef?: React.Ref; searchTerm: string; onSearch: (searchTerm: string) => void; className?: string; @@ -75,6 +76,7 @@ interface ISearchBarProps { export default function SearchBar(props: ISearchBarProps) { const inputRef = useStyledRef(); + const combinedRef = useCombinedRefs(inputRef, props.searchInputRef); const onInput = useCallback( (event: React.FormEvent) => { @@ -98,10 +100,10 @@ export default function SearchBar(props: ISearchBarProps) { 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 01297f56309a..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 { 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,8 +102,11 @@ export default function SelectLocation() { } }, [relaySettingsUpdater, resetScrollPositions, relaySettings]); + const searchInputRef = useStyledRef(); + const changeLocationType = useCallback( (locationType: LocationType) => { + searchInputRef.current?.focus(); saveScrollPosition(); setLocationType(locationType); }, @@ -128,6 +131,7 @@ export default function SelectLocation() { const showOwnershipFilter = ownership !== Ownership.any; const showProvidersFilter = providers.length > 0; const showFilters = showOwnershipFilter || showProvidersFilter || showDaitaFilter; + return ( @@ -237,7 +241,11 @@ export default function SelectLocation() { )} - +