Skip to content

Commit

Permalink
Autofocus location search bar when switching tabs
Browse files Browse the repository at this point in the history
Fixes #6554
  • Loading branch information
MrChocolatine committed Sep 23, 2024
1 parent 88315ff commit 47f69da
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 3 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,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

#### Windows
- Add experimental support for Windows ARM64.
Expand Down
6 changes: 5 additions & 1 deletion gui/src/renderer/components/SearchBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,8 @@ interface ISearchBarProps {
onSearch: (searchTerm: string) => void;
className?: string;
disableAutoFocus?: boolean;
hasLocationTypeChanged?: boolean;
resetLocationTypeChange?: () => void;
}

export default function SearchBar(props: ISearchBarProps) {
Expand All @@ -93,7 +95,9 @@ export default function SearchBar(props: ISearchBarProps) {
if (!props.disableAutoFocus) {
inputRef.current?.focus({ preventScroll: true });
}
}, []);

return () => props.resetLocationTypeChange?.();
}, [props.hasLocationTypeChanged]);

return (
<StyledSearchContainer className={props.className}>
Expand Down
14 changes: 12 additions & 2 deletions gui/src/renderer/components/select-location/SelectLocation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -104,10 +104,14 @@ export default function SelectLocation() {
}
}, [relaySettingsUpdater, resetScrollPositions, relaySettings]);

const [hasLocationTypeChanged, notifyLocationTypeChange, resetLocationTypeChange] =
useBoolean(false);

const changeLocationType = useCallback(
(locationType: LocationType) => {
saveScrollPosition();
setLocationType(locationType);
notifyLocationTypeChange();
},
[saveScrollPosition],
);
Expand All @@ -130,6 +134,7 @@ export default function SelectLocation() {
const showOwnershipFilter = ownership !== Ownership.any;
const showProvidersFilter = providers.length > 0;
const showFilters = showOwnershipFilter || showProvidersFilter || showDaitaFilter;

return (
<BackAction action={onClose}>
<Layout>
Expand Down Expand Up @@ -239,7 +244,12 @@ export default function SelectLocation() {
</StyledFilterRow>
)}

<StyledSearchBar searchTerm={searchValue} onSearch={updateSearchTerm} />
<StyledSearchBar
searchTerm={searchValue}
onSearch={updateSearchTerm}
hasLocationTypeChanged={hasLocationTypeChanged}
resetLocationTypeChange={resetLocationTypeChange}
/>
</StyledNavigationBarAttachment>

<NavigationScrollbars ref={scrollViewRef}>
Expand Down

0 comments on commit 47f69da

Please sign in to comment.