Use directive tutorial makes it impossible to type

[MaddyGuthridge]

Tutorial page associated with the issue: https://learn.svelte.dev/tutorial/actions

While completing this tutorial, I was frequently unable to type due to the partially-complete page handling all key-strokes. In order to type, I had to close the menu modal, disabling the event handler before typing again. However, once I typed a few characters, the preview would reload and begin eating all my keypresses again, which was very frustrating.

I have limited knowledge of Svelte, but I believe this could be due to this line of code in actions.js:

focusable()[0]?.focus();

Once the exercise is completed, this doesn't appear to be an issue (although the selection does do weird things), it's only an issue when the use:trapFocus directive is added.

Potential fixes:

• Modify the handler so that it doesn't handle keypresses unless the selection is already within one of its selectable items.
• Use a different example that doesn't involve handling keypresses.
• Modify the way that examples are rendered so that example code can't break the rest of the website.

Perhaps once I've had a few days to get better at Svelte I might be able to try and work on this myself, but I am also very time-poor and may not be able to in a reasonable time-frame.