From c91ede1864759c069ee7f72b500374d6cc500dad Mon Sep 17 00:00:00 2001
From: Shunichi Hato <shunichi@meuron.jp>
Date: Thu, 31 Oct 2019 17:28:56 +0900
Subject: [PATCH 1/3] Fix crud example update error when filtering

because the index `i` in update refers to the index in the original
---
 .../examples/20-7guis/05-7guis-crud/App.svelte       | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/site/content/examples/20-7guis/05-7guis-crud/App.svelte b/site/content/examples/20-7guis/05-7guis-crud/App.svelte
index f55aeb0d83..68574bca43 100644
--- a/site/content/examples/20-7guis/05-7guis-crud/App.svelte
+++ b/site/content/examples/20-7guis/05-7guis-crud/App.svelte
@@ -22,13 +22,13 @@
 	let i = 0;
 
 	$: filteredPeople = prefix
-		? people.filter(person => {
+		? people.map(person => {
 			const name = `${person.last}, ${person.first}`;
-			return name.toLowerCase().startsWith(prefix.toLowerCase());
+			return { matched: name.toLowerCase().startsWith(prefix.toLowerCase()), person: person };
 		})
-		: people;
+		: people.map(person => Object({ matched: true, person: person }));
 
-	$: selected = filteredPeople[i];
+	$: selected = filteredPeople[i].person;
 
 	$: reset_inputs(selected);
 
@@ -82,8 +82,10 @@
 <input placeholder="filter prefix" bind:value={prefix}>
 
 <select bind:value={i} size={5}>
-	{#each filteredPeople as person, i}
+	{#each filteredPeople as { matched, person }, i}
+		{#if matched}
 		<option value={i}>{person.last}, {person.first}</option>
+		{/if}
 	{/each}
 </select>
 

From 5e4246e85ee57125d4bd29041763f8f6c8320bbe Mon Sep 17 00:00:00 2001
From: Shunichi Hato <shunichi@meuron.jp>
Date: Sun, 3 Nov 2019 13:58:35 +0900
Subject: [PATCH 2/3] Make selection reactive with search

---
 site/content/examples/20-7guis/05-7guis-crud/App.svelte | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/site/content/examples/20-7guis/05-7guis-crud/App.svelte b/site/content/examples/20-7guis/05-7guis-crud/App.svelte
index 68574bca43..67145ceec7 100644
--- a/site/content/examples/20-7guis/05-7guis-crud/App.svelte
+++ b/site/content/examples/20-7guis/05-7guis-crud/App.svelte
@@ -28,6 +28,11 @@
 		})
 		: people.map(person => Object({ matched: true, person: person }));
 
+	$: if (!filteredPeople[i].matched) {
+		let newIndex = filteredPeople.findIndex(person => person.matched);
+		if (newIndex >= 0) i = newIndex;
+	}
+
 	$: selected = filteredPeople[i].person;
 
 	$: reset_inputs(selected);

From c233a37d4d6575fb90f2edc0a2c14819542ca076 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Thu, 14 Nov 2019 16:55:34 -0500
Subject: [PATCH 3/3] simpler fix

---
 .../20-7guis/05-7guis-crud/App.svelte         | 36 ++++++-------------
 1 file changed, 11 insertions(+), 25 deletions(-)

diff --git a/site/content/examples/20-7guis/05-7guis-crud/App.svelte b/site/content/examples/20-7guis/05-7guis-crud/App.svelte
index 67145ceec7..aec623d2a4 100644
--- a/site/content/examples/20-7guis/05-7guis-crud/App.svelte
+++ b/site/content/examples/20-7guis/05-7guis-crud/App.svelte
@@ -2,18 +2,9 @@
 
 <script>
 	let people = [
-		{
-			first: 'Hans',
-			last: 'Emil'
-		},
-		{
-			first: 'Max',
-			last: 'Mustermann'
-		},
-		{
-			first: 'Roman',
-			last: 'Tisch'
-		}
+		{ first: 'Hans', last: 'Emil' },
+		{ first: 'Max', last: 'Mustermann' },
+		{ first: 'Roman', last: 'Tisch' }
 	];
 
 	let prefix = '';
@@ -22,18 +13,13 @@
 	let i = 0;
 
 	$: filteredPeople = prefix
-		? people.map(person => {
+		? people.filter(person => {
 			const name = `${person.last}, ${person.first}`;
-			return { matched: name.toLowerCase().startsWith(prefix.toLowerCase()), person: person };
+			return name.toLowerCase().startsWith(prefix.toLowerCase());
 		})
-		: people.map(person => Object({ matched: true, person: person }));
+		: people;
 
-	$: if (!filteredPeople[i].matched) {
-		let newIndex = filteredPeople.findIndex(person => person.matched);
-		if (newIndex >= 0) i = newIndex;
-	}
-
-	$: selected = filteredPeople[i].person;
+	$: selected = filteredPeople[i];
 
 	$: reset_inputs(selected);
 
@@ -44,7 +30,9 @@
 	}
 
 	function update() {
-		people[i] = { first, last };
+		selected.first = first;
+		selected.last = last;
+		people = people;
 	}
 
 	function remove() {
@@ -87,10 +75,8 @@
 <input placeholder="filter prefix" bind:value={prefix}>
 
 <select bind:value={i} size={5}>
-	{#each filteredPeople as { matched, person }, i}
-		{#if matched}
+	{#each filteredPeople as person, i}
 		<option value={i}>{person.last}, {person.first}</option>
-		{/if}
 	{/each}
 </select>