Skip to content

Use directive tutorial makes it impossible to type #612

Open
@MaddyGuthridge

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions