Autofocus location search bar when switching tabs

[MrChocolatine]

What this PR changes

This PR adds an autofocus to the search bar, of the Selection location view, when changing tabs.

Why this is wanted

To contribute and implement the feature requested in #6554 .
(I know I was told the UI is going to be re-worked: #6554 (comment) , but I thought I could satisfy my curiosity by giving it a shot)

How it's implemented

While I know React, I am not pro-efficient with it as it's not my daily tool. So I hope my implementation is okay-ish and fits your standards.

By notifying when the location type has changed (using useBoolean()), while passing the information to the <SearchBar> component.

How to test the change

The autofocus of the search bar is currently not tested, even when it was initially added:
d5f216e (#4163)

---

Fixes #6554

---

This change is 

[raksooo]

Thank you for providing us with this work! It's definitely a nice addition! I have some concerns about the code though:

1. The SearchBar component is used in the Split tunneling view as well and in there the LocationType-props doesn't make much sense. I would prefer to not pass anything that specific to that component.
2. The useBoolean approach seems a bit more complicated than needed, but should work fine.

I have some suggestions for you if you would like to improve it yourself, or if you want me to do it I can submit another PR for this :) Here is how I would do it:

• Forward a ref into SearchBar using React.forwardRef and combine it with the inputRef using useCombinedRefs. You can check AutoResizingTextInputWithRef for inspiration.
• Keep a ref in the SelectLocation component and pass it down to SearchBar
• In changeLocationType in SelectLocation call .focus() on the ref.

This would let the SelectLocation component call .focus() on the input field without exposing any internals of the select location view to the search bar. Let me know if you want me to make these changes :)

[MrChocolatine]

Thank you for providing us with this work! It's definitely a nice addition! I have some concerns about the code though:

1. The SearchBar component is used in the Split tunneling view as well and in there the LocationType-props doesn't make much sense. I would prefer to not pass anything that specific to that component.
2. The useBoolean approach seems a bit more complicated than needed, but should work fine.

I have some suggestions for you if you would like to improve it yourself, or if you want me to do it I can submit another PR for this :) Here is how I would do it:

• Forward a ref into SearchBar using React.forwardRef and combine it with the inputRef using useCombinedRefs. You can check AutoResizingTextInputWithRef for inspiration.
• Keep a ref in the SelectLocation component and pass it down to SearchBar
• In changeLocationType in SelectLocation call .focus() on the ref.

This would let the SelectLocation component call .focus() on the input field without exposing any internals of the select location view to the search bar. Let me know if you want me to make these changes :)

Thanks for the feedback @raksooo .

I will try to rework the PR following your suggestions 👍 .

[MrChocolatine]

Thank you for providing us with this work! It's definitely a nice addition! I have some concerns about the code though:

1. The SearchBar component is used in the Split tunneling view as well and in there the LocationType-props doesn't make much sense. I would prefer to not pass anything that specific to that component.
2. The useBoolean approach seems a bit more complicated than needed, but should work fine.

I have some suggestions for you if you would like to improve it yourself, or if you want me to do it I can submit another PR for this :) Here is how I would do it:

• Forward a ref into SearchBar using React.forwardRef and combine it with the inputRef using useCombinedRefs. You can check AutoResizingTextInputWithRef for inspiration.
• Keep a ref in the SelectLocation component and pass it down to SearchBar
• In changeLocationType in SelectLocation call .focus() on the ref.

This would let the SelectLocation component call .focus() on the input field without exposing any internals of the select location view to the search bar. Let me know if you want me to make these changes :)

@raksooo , changes applied following your suggestion ✌️ .

[MrChocolatine]

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.

[raksooo]

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 :)

[MrChocolatine]

Strangely tests are failing:

https://github.com/mullvad/mullvadvpn-app/actions/runs/11314889729/job/31465392999#step:11:57

while I cannot reproduce locally:

[raksooo]

The failing test should be fixed in this PR: #6970 :)