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

Slot having stale state if transition is reversed midway #5394

Closed
dkzlv opened this issue Sep 14, 2020 · 7 comments · Fixed by #6314
Closed

Slot having stale state if transition is reversed midway #5394

dkzlv opened this issue Sep 14, 2020 · 7 comments · Fixed by #6314

Comments

@dkzlv
Copy link
Contributor

dkzlv commented Sep 14, 2020

Describe the bug
Slot content seems to have stale state if the component were to be destroyed, but the transition was reversed midway.

To Reproduce
REPL.

I apologize if the example is excessive, I just tried to recreate the components from my app as close as possible. My case:

  1. I have an array of stuff in a store
  2. I want to open a single item in a modal. The modal is a component with a default slot, that basically handles the transition of the modal wrapper based on a boolean prop
  3. in this modal I will perform some async operations and then delete the item from the store. The modal should close with a transition every time and then be recreated with a new item if it is present in the store

Steps:

  1. click on the "Run" button. It has a 300 seconds delay
  2. the modal goes away, but then goes back up. Both the prop text and local variable loading are now stale: the text prop is the same as it was before the transition started and loading is in true state. They'll never update no matter how much you try
  3. also, you can push the "Toggle loading" button and it won't do anything the first time (presumably, it would toggle the default false state to true state, therefore the interface doesn't change)

Expected behavior
Prop should be updated, and the local state should be independent.

Stacktraces
N/A

Information about your Svelte project:

  • Your browser and the version: Brave 1.13.86 (latest), Chrome 85.0 (latest), Safari 13.1.2 (latest)
  • Your operating system: OS X 10.15.6
  • Svelte version: first noticed when was working with 3.23.1, though could be present before. Still present on 3.25.0
  • Whether your project uses Webpack or Rollup: Rollup ()

Severity
Not really. I use shady timers to avoid this bug and it is not critical for me.

Additional context
I added a timer-based fix on line 21 of the ShowSingleItem.svelte component. It seems to me that this timer value is somehow connected to transition duration, although scale has a default of 400, but the fix works fine for me with a value of 350ms.

@TheComputerM
Copy link

I think I am having the same problem:

  • Go here
  • Then click the closed navigation groups on the left side multiple times quickly.

@stale

This comment has been minimized.

@stale stale bot added the stale-bot label Jun 27, 2021
@stale

This comment has been minimized.

@stale stale bot closed this as completed Jul 11, 2021
@benmccann
Copy link
Member

I'm reopening this since there's a PR pending for it (#6314)

@benmccann benmccann reopened this Jul 23, 2021
@stale stale bot removed the stale-bot label Jul 23, 2021
@Conduitry
Copy link
Member

This should be fixed now in 3.40.3 - https://svelte.dev/repl/405911d112e040818e26e30f37c61b8d?version=3.40.3

@AlexGalays
Copy link
Contributor

I had the same issue; thanks to everyone involved in the fix :)

@slightlyfaulty
Copy link

It seems this bug still occurs in some cases. In this version of the REPL, if <Modal> is inside an #if, the slot state doesn't get updated.

https://svelte.dev/repl/09afd379856840c589c88ff5fdef2737?version=3.44.1

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 a pull request may close this issue.

6 participants