Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Autofocus location search bar when switching tabs #6832

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+15 −4
Open

Autofocus location search bar when switching tabs #6832

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
defd523
Autofocus location search bar when switching tabs
MrChocolatine Oct 13, 2024
eb45c2e
Rework logic using `ref` objects
MrChocolatine Oct 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
6 changes: 4 additions & 2 deletions gui/src/renderer/components/SearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -67,6 +67,7 @@ export const StyledClearIcon = styled(ImageView)({
});

interface ISearchBarProps {
searchInputRef?: React.Ref<HTMLInputElement>;
Copy link
Contributor Author

@MrChocolatine MrChocolatine Oct 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In your suggestion @raksooo , you showed me AutoSizingTextInputWithRef as an example:

mullvadvpn-app/gui/src/renderer/components/cell/Input.tsx

Line 196 in d35866d

function AutoSizingTextInputWithRef(props: IInputProps, forwardedRef: React.Ref<HTMLInputElement>) {

which consumes a forwardedRef parameter, the ref object does not come from its props.

But here I was only able to pass it via a prop.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To use the ref-prop you will need to wrap the component in React.forwardRef.

function SearchBar(props: ISearchBarProps, forwardedRef: React.Ref<HTMLInputElement>) { ... }

export default React.forwardRef(SearchBar);

Then you won't have to include it in props and you'll be able to use SearchBar like this:

<SearchBar ref={searchInputRef} ... />

I think React.forwardRef won't be needed in future versions of react, but for now we'll need to add it :)

searchTerm: string;
onSearch: (searchTerm: string) => void;
className?: string;
Expand All @@ -75,6 +76,7 @@ interface ISearchBarProps {

export default function SearchBar(props: ISearchBarProps) {
const inputRef = useStyledRef<HTMLInputElement>();
const combinedRef = useCombinedRefs(inputRef, props.searchInputRef);

const onInput = useCallback(
(event: React.FormEvent) => {
Expand All @@ -98,10 +100,10 @@ export default function SearchBar(props: ISearchBarProps) {
return (
<StyledSearchContainer className={props.className}>
<StyledSearchInput
ref={inputRef}
value={props.searchTerm}
onInput={onInput}
placeholder={messages.gettext('Search for...')}
ref={combinedRef}
/>
<StyledSearchIcon source="icon-search" width={24} tintColor={colors.white60} />
{props.searchTerm.length > 0 && (
Expand Down
12 changes: 10 additions & 2 deletions gui/src/renderer/components/select-location/SelectLocation.tsx
View file
Open in desktop
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 { useNormalRelaySettings, useStyledRef } from '../../lib/utilityHooks';
import { useSelector } from '../../redux/store';
import * as Cell from '../cell';
import { useFilteredProviders } from '../Filter';
Expand Down Expand Up @@ -102,8 +102,11 @@ export default function SelectLocation() {
}
}, [relaySettingsUpdater, resetScrollPositions, relaySettings]);

const searchInputRef = useStyledRef<HTMLInputElement>();

const changeLocationType = useCallback(
(locationType: LocationType) => {
searchInputRef.current?.focus();
saveScrollPosition();
setLocationType(locationType);
},
Expand All @@ -128,6 +131,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 @@ -237,7 +241,11 @@ export default function SelectLocation() {
</StyledFilterRow>
)}

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

<NavigationScrollbars ref={scrollViewRef}>
Expand Down
Loading