Svelte: Keyed each block does not render the {:else} clause

Created on 10 Mar 2020  路  5Comments  路  Source: sveltejs/svelte

Description:
A keyed each block does not render its {:else} clause when there is 0 items in the store:
-it does render the clause after startup (on mount = render = or whatever I should call it)
-it does NOT render it when the items are removed during the existence of the component

REPL:
https://svelte.dev/repl/adc8c6b13f9b44aeaf80165bb786392a?version=3.19.2

You can see there is a store with a few items that are then just written out in an each block. Then there is a button which updates the store by setting an empty array to it.

Steps to reproduce:

  1. Run the REPL
  2. Click the 'Remove all' button

Result:
The {:else} clause not rendered.

Expected result:
The {:else} clause rendered.

Additional information:

  1. As mentioned above, starting with an empty store would actually render the {:else} clause.
  2. Removing the KEY (item.id) would make everything work correctly.

Am I missing something here? Why would the each block's key block the output of the else clause? This must be a bug...

bug

All 5 comments

Hi! It seems the bug was introduced in #4413.
The value of the updated array is in scope only in the each block and not in the else block.
I'm not really experienced with the codebase but i could try to submit a pr later.
The fix should be easy enough, but I could use some advice or example on what kind of test to write for this bug.

Good find! Make a simpler failing test case, e.g. REPL (working in 3.18.2).

See the runtime each-block-else test case. Probably the best is to make a keyed version for each-block-else, so each-block-keyed-else.

Thank you! I'll try in a few hours.

The test case above is just a copy of the each-block-else. Now it's only the task to make this failing test case succeed and not fail other test cases :slightly_smiling_face:

image

Was this page helpful?
0 / 5 - 0 ratings

Related issues

rob-balfre picture rob-balfre  路  3Comments

1u0n picture 1u0n  路  3Comments

clitetailor picture clitetailor  路  3Comments

bestguy picture bestguy  路  3Comments

lnryan picture lnryan  路  3Comments