Avoid focus loss on switching tabs

[katinthehatsite]

Related issues

• Closes STU-53

Proposed Changes

This PR ensures that we don't lose focus when we use the keyboard navigation when switching between tabs.

Testing Instructions

• Pull the changes from this branch
• Start Studio
• Click on one of the tabs e.g. Overview
• Try using left and right arrows to move through tabs
• Confirm that you can move between tabs and that they do not lose focus
• Compare this behaviour to trunk and observe that keyboard navigation does not work correctly there and you can't move through tabs

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[bcotrim]

Have you considered changing the TabPanel key to selectedSite.id?
I think it would also fix the issue without needing the isFirstRender lastChangeWasUser logic.

Unrelated observation: While testing keyboard navigation, I noticed that navigating to the AI Assistant tab moves focus to the input. This is pre-existing behavior from trunk, but it feels unexpected when navigating via keyboard. Might be worth a separate issue?

[katinthehatsite]

Have you considered changing the TabPanel key to selectedSite.id?
I think it would also fix the issue without needing the isFirstRender lastChangeWasUser logic.

I did and this approach would be simpler but would it not affect setting the tabs like this, for example?

studio/src/hooks/use-site-details.tsx

Line 200 in 3348f90

setSelectedTab( 'overview' );

[bcotrim]

I did and this approach would be simpler but would it not affect setting the tabs like this, for example?

You are right, on deleteSiteit would work since it also changes selected site ID, but on useListenDeepLinkConnection it might break. Let's keep your original solution, thanks for the clarification!

[gcsecsey]

The changes LGTM. I was also thinking about potential simplifications, thanks for the explanation above Kat for why the useEffect and the refs are needed.

Functionally, this works great:

CleanShot.2025-10-09.at.12.29.07.mp4

[katinthehatsite]

The changes LGTM. I was also thinking about potential simplifications, thanks for the explanation above Kat for why the useEffect and the refs are needed.

Yeah I spent some time dancing around it yesterday but could not find something simpler to make sure there is no regressions 😅