Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Update 03-template-syntax.md - on:click on:click emits twice to parents - explanation #8048

Closed
wants to merge 1 commit into from

Conversation

Tommertom
Copy link

Added explanation on double event handlers that propagate to the parent. To make sure the developer understands the true power of adding multiple handlers. (and I have been in a situation forgetting about this, which took me a while to figure out).

Before submitting the PR, please make sure you do the following

  • It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
  • Prefix your PR title with [feat], [fix], [chore], or [docs].
  • This message body should clearly illustrate what problems it solves.
  • Ideally, include a test that fails without this PR but passes with it.

Tests

  • Run the tests with npm test and lint the project with npm run lint

Added explanation on double event handlers that propagate to the parent. To make sure the developer understands the true power of adding multiple handlers. (and I have been in a situation forgetting about this, which took me a while to figure out).
@Tommertom Tommertom changed the title Update 03-template-syntax.md Update 03-template-syntax.md - on:click on:click emits twice to parents - explanation Nov 22, 2022
@Tommertom Tommertom changed the title Update 03-template-syntax.md - on:click on:click emits twice to parents - explanation [docs] Update 03-template-syntax.md - on:click on:click emits twice to parents - explanation Nov 22, 2022
@Conduitry
Copy link
Member

When is it useful to emit two instances of the event to the parent component?

@Tommertom
Copy link
Author

Tommertom commented Nov 23, 2022

When is it useful to emit two instances of the event to the parent component?

While I can't say never, it is likely not the best way to achieve something close to this at the parent level.

It did happen to me by accident keeping me busy debugging for a while until I found I added on:click twice (I had many event handlers added to a component). It was a bit of a rabbithole, so I felt I needed to share to help other avoiding this issue.

So maybe my PR suggests to document it as a feature or even a desirable pattern. That is not my intention. It's more like a caution.

How best to cover this in the documentation, or somewhere else? Happy to make adjustments.

@dummdidumm
Copy link
Member

To me this feels expected - if I add an event listener multiple times, I'll be notified multiple times. This is the same with regular DOM event listeners. So I don't think we should mention it since it serves no use case other than "be careful" - to me this doesn't add enough value to the documentation vs the added lines. We have to leave out some things - if we add everything, the documentation will be too long.

@Tommertom
Copy link
Author

Tommertom commented Nov 24, 2022

Hi all

I agree adding to the doc wont make it easier to digest as a whole.

I do believe it is a pitfall for beginning devs and I bet this will occur in the future.

I see a reference being made to another issue where a different solution is suggested

To me, we can close this. Enough said and possibly Google indexing will help out too.

@Tommertom Tommertom closed this Nov 24, 2022
@Tommertom Tommertom deleted the patch-2 branch November 24, 2022 13:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants