Skip to content

Slotted content less reactive when referencing external slot props in event handler #7440

@brunnerh

Description

@brunnerh

Describe the bug

This is a very specific issue which only seems to happen when passing slot props into content slotted into another component, only using them in an event handler.

E.g.

<ItemDisplay content={item}> <svelte:fragment slot="default" let:content> <!-- ... --> <Wrapper> <!-- Passed value of "content" will be outdated if original source (item) changes --> <button type=button on:click={() => onEdit(content)}>Edit (Wrapped)</button> </Wrapper> <!-- Passed value of "content" will be up to date if original source (item) changes --> <button type=button on:click={() => onEdit(content)}>Edit</button> </svelte:fragment> </Table>

If the the content is additionally used in any other way, e.g. JSON stringified in the button content, the problem disappears.

Reproduction

REPL

The edit buttons are supposed to initialize an edit dialog with the current state of the item, that being whether it is checked.
So if an item is initially unchecked, the edit dialog should also have an unchecked checkbox. Is this changed and the dialog is opened again, the box should now be checked.

Concrete steps:

  • Click "Edit (Wrapped)" button
  • Check box in dialog, confirm with OK
  • Click the same edit button again, observe checked state in dialog
  • (Clicking the non-wrapped edit button should show the dialog in the correct state)

Logs

No response

System Info

System: OS: Windows 10 10.0.19044 Memory: 13.37 GB / 31.92 GB Binaries: Node: 16.7.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 100.0.4896.75 Edge: Spartan (44.19041.1266.0), Chromium (100.0.1185.36) Internet Explorer: 11.0.19041.1566 npmPackages: svelte: ^3.46.4 => 3.47.0 webpack: ^5.70.0 => 5.70.0

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions