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.

Sign up for GitHub

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

Jump to bottom

textfield values incorrectly retained #77

Closed
seriousManual opened this issue Dec 1, 2016 · 3 comments
Closed

textfield values incorrectly retained #77

seriousManual opened this issue Dec 1, 2016 · 3 comments

Comments

@seriousManual
Copy link

seriousManual commented Dec 1, 2016 •
edited
Loading

svelte-cli version 1.0.4

template:

{{#each samples as sample}}
    {{sample}}: <input type="text"><br>
{{/each}}

bootstrap:

<!doctype html>
<html>
<head>
    <title>My first Svelte app</title>
</head>
<body>
<main></main>
<script src='helloWorld.js'></script>
<script>
    var app = new helloWorld({
        target: document.querySelector( 'main' ),
        data: {
            samples: ['foo', 'bar', 'bax', 'baz']
        }
    });

    setTimeout(() => {
        app.set({samples: ['foo', 'baz']});
    }, 6000)
</script>
</body>
</html>

Reproduce:

  1. Load Page
  2. Enter values from 1 to 4 in the text boxes
  3. wait for timeout to fire

Expected:
image

Actual:
image

Looks like the relation between the loop pass and the actual dom element is not kept, so the 3rd and 4th input box are removed though the 2nd and 3rd should have been removed.

Update:
The same thing happens in React when no key is provided to the root element of each loop pass.
In React though it is enforced that there is only one root element in each iteration whereas in svelte this is not necessary.
@Swatinem
Copy link
Member

Swatinem commented Dec 1, 2016

Yes, I also think we need something like key for svelte.

This was referenced Dec 1, 2016
Closed
Merged
@paulovieira
Copy link

Using keys is also the approach taken by the incremental-dom lib (whose philosophy is somewhat related to svelte, that is, update the DOM directly, buy the nodes that require it):

http://google.github.io/incremental-dom/#demos/using-keys

@Rich-Harris
Copy link
Member

Closing this in favour of #81

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@Swatinem @Rich-Harris @seriousManual @paulovieira