Connect login form: Refocus password field on submission error

[ravicious]

Closes #54508.

To understand the fix, one first must understand how it worked before. I assumed that some normal browser behavior caused it to work, but that's not the case.

Prior to #47883, upon submission the form would immediately switch to the next "step", before a response from the login attempt even arrived. When the response arrived with an error, the form would go back to the previous step, thus re-firing all effects, including the one that would focus the password field.

teleport/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/FormLogin/FormLocal/FormLocal.tsx

Lines 44 to 46 in 33f2bbf

	const passwordInputRef = useRefAutoFocus<HTMLInputElement>({
	shouldFocus: hasTransitionEnded && autoFocus && !!loggedInUserName,
	});

Details

https://github.com/user-attachments/assets/d834a228-65d3-4fbb-9cb8-fdf636e1b41e

After the cleanup from #47883, the form doesn't go into the next step immediately on submission. Instead it disables the fields and shows a progress bar. When an error response arrives, it enables the fields, but the focus is no longer on the form itself. The focus effects do not fire because their deps haven't changed.

Details

https://github.com/user-attachments/assets/114d00f1-51b9-4a7a-babf-dfd3fc3993c4

The fix is to include the state of the form submission in the value that decides whether a particular field should be focused or not.

Details

https://github.com/user-attachments/assets/df1c89fd-d793-4f34-81a9-4570f9f30dd3

I'm still not sure if regular forms lose focus on submission as well, or if the need to trigger those focus effects comes from the same place that the need to use useRefAutoFocus instead of autoFocus.

[ravicious]

I added this because arguably it's incompatible with hooks are "supposed to" be used.

In this specific scenario, it was easy to avoid using refocusDeps by just adding another comparison when constructing the value for shouldFocus. However, there are other places where we use this hook where this might be harder. For example:

teleport/web/packages/teleport/src/components/NewMfaDeviceForm/NewMfaDeviceForm.tsx

Lines 89 to 92 in f59fcb7

	const deviceNameInputRef = useRefAutoFocus<HTMLInputElement>({
	shouldFocus,
	refocusDeps: [mfaType.value],
	});

Here the callsite would like to retrigger focus when mfaType.value changes, which necessitates tracking the previous value of it, something like in "Adjusting some state when a prop changes". Maybe there are some other ways to address this but nothing comes to my mind at the moment.

[gzdunek]

Works great 👍

[backport-bot-workflows]

@ravicious See the table below for backport results.

Branch	Result
branch/v17	Create PR
branch/v18	Create PR