From defd523b15cd9c6dce90fac2b693f3a53a85692e Mon Sep 17 00:00:00 2001 From: MrChocolatine <47531779+MrChocolatine@users.noreply.github.com> Date: Sun, 13 Oct 2024 14:42:59 +0100 Subject: [PATCH 1/2] Autofocus location search bar when switching tabs Fixes #6554 --- CHANGELOG.md | 1 + gui/src/renderer/components/SearchBar.tsx | 6 +++++- .../components/select-location/SelectLocation.tsx | 14 ++++++++++++-- 3 files changed, 18 insertions(+), 3 deletions(-) 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..40f4614dd94b 100644 --- a/gui/src/renderer/components/SearchBar.tsx +++ b/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 }); } - }, []); + + return () => props.resetLocationTypeChange?.(); + }, [props.hasLocationTypeChanged]); return ( diff --git a/gui/src/renderer/components/select-location/SelectLocation.tsx b/gui/src/renderer/components/select-location/SelectLocation.tsx index 01297f56309a..e196e103c881 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 { useBoolean, useNormalRelaySettings } from '../../lib/utilityHooks'; import { useSelector } from '../../redux/store'; import * as Cell from '../cell'; import { useFilteredProviders } from '../Filter'; @@ -102,10 +102,14 @@ export default function SelectLocation() { } }, [relaySettingsUpdater, resetScrollPositions, relaySettings]); + const [hasLocationTypeChanged, notifyLocationTypeChange, resetLocationTypeChange] = + useBoolean(false); + const changeLocationType = useCallback( (locationType: LocationType) => { saveScrollPosition(); setLocationType(locationType); + notifyLocationTypeChange(); }, [saveScrollPosition], ); @@ -128,6 +132,7 @@ export default function SelectLocation() { const showOwnershipFilter = ownership !== Ownership.any; const showProvidersFilter = providers.length > 0; const showFilters = showOwnershipFilter || showProvidersFilter || showDaitaFilter; + return ( @@ -237,7 +242,12 @@ export default function SelectLocation() { )} - + From eb45c2ea3665a5f5eae7a78fa4217c8d98b60f51 Mon Sep 17 00:00:00 2001 From: MrChocolatine <47531779+MrChocolatine@users.noreply.github.com> Date: Sun, 13 Oct 2024 14:42:59 +0100 Subject: [PATCH 2/2] Rework logic using `ref` objects Fixes #6554 --- gui/src/renderer/components/SearchBar.tsx | 12 +++++------- .../components/select-location/SelectLocation.tsx | 10 ++++------ 2 files changed, 9 insertions(+), 13 deletions(-) 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() { )}