tutorial/svelte/actions keeps interrupting typing in the code window

[natanmaia95]

https://svelte.dev/tutorial/svelte/actions

The prompt of the tutorial is to add a "grab focus" kind of element to a menu.

Problem is, every few characters you type the preview refreshes and the menu takes the focus away from the code window,
without feedback, interrupting your typing. There's a lot to type as well so you keep having to move your mouse back to the code window to type 4-7 letters at a time.

The problem starts appearing in my session while typing:

$effect(() => {
	focusable()[0]?.focus();
>>>node.addEventListener('keydown', handleKeydown);<<< this line
});

It usually happens when typing 'keydown'. The preview keeps refreshing and stealing focus from the code window and preventing me to type.

I'm not familiar with this refreshing preview thing so I don't have proposed solutions.

[eggdropsoap]

Could this be mitigated most easily by changing the order of the tutorial instructions, to put the step that adds "use:trapFocus" to the div at the end of the instructions instead of the beginning?

[spacepumpkin]

Agreed with @eggdropsoap's suggestion. If the use:trapFocus is hooked up after the actions.svelte.js file is fully updated, then I don't run into this bug. I can file a PR to update the instructions.

[joryphillips]

I think this tutorial page (https://svelte.dev/tutorial/svelte/actions) needs to be comprehensively rethought, or get some deeper investigation.

If the code is added in the original, pre #1168 order, in addition to the keydown bug described above, I also get an "Error compiling component" message (Unexpected token) when adding to the $effect function, so something else seems wrong somewhere.

Following the order in #1168, I don't see the tab behavior that I expect given the code present, especially the focus returning to a previous element.