From 3b1efdd0e680ce093cf3e96cc1c4af7ff552d931 Mon Sep 17 00:00:00 2001
From: Richard O'flynn <richard.oflynn@brighter-software.co.uk>
Date: Thu, 10 Dec 2020 18:27:50 +0000
Subject: [PATCH] try to fix reactivity

---
 .../SelectableTile/SelectableTileReactive.svelte     |  9 +++++----
 src/Tile/SelectableTileGroup.svelte                  | 12 +++---------
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/docs/src/pages/framed/SelectableTile/SelectableTileReactive.svelte b/docs/src/pages/framed/SelectableTile/SelectableTileReactive.svelte
index fb216977..8de9c4c3 100644
--- a/docs/src/pages/framed/SelectableTile/SelectableTileReactive.svelte
+++ b/docs/src/pages/framed/SelectableTile/SelectableTileReactive.svelte
@@ -7,7 +7,8 @@
 
   let selectedValues = ["1"];
   let selectedValues2 = [];
-  let selectedValues3 = [
+  let selectedValues3 = [];
+  let selectedValues3_control = [
     { value: "1", selected: true },
     { value: "2", selected: false },
     { value: "3", selected: false },
@@ -64,7 +65,7 @@
   selectedValues="{selectedValues3}"
   legend="Select the options you require"
 >
-  {#each selectedValues3 as item}
+  {#each selectedValues3_control as item}
     <SelectableTile value="{item.value}" bind:selected="{item.selected}">
       {item.value}
     </SelectableTile>
@@ -72,11 +73,11 @@
 </SelectableTileGroup>
 
 <div>
-  {selectedValues3.map((item) => item.value).join(', ')}
+  {selectedValues3.join(', ')}
 
   <Button
     on:click="{() => {
-      selectedValues3 = selectedValues3.map((item) => {
+      selectedValues3_control = selectedValues3.map((item) => {
         return { ...item, selected: false };
       });
     }}"
diff --git a/src/Tile/SelectableTileGroup.svelte b/src/Tile/SelectableTileGroup.svelte
index ce151f20..63fc25d2 100644
--- a/src/Tile/SelectableTileGroup.svelte
+++ b/src/Tile/SelectableTileGroup.svelte
@@ -18,15 +18,9 @@
   import { writable } from "svelte/store";
 
   const dispatch = createEventDispatcher();
-  const _selectedValues = writable(
-    selectedValues.map((s) => (s.value ? s.value : s))
-  );
+  const _selectedValues = writable([]);
 
-  $: _selectedValues.set(
-    selectedValues
-      .filter((s) => (s.value ? s.selected : true))
-      .map((s) => (s.value ? s.value : s))
-  );
+  $: _selectedValues.set(selectedValues);
 
   setContext("SelectableTileGroup", {
     _light: light,
@@ -40,7 +34,7 @@
       }),
   });
 
-  $: selectedValues = $_selectedValues;
+  $: selectedValues = $_selectedValues.map();
   $: dispatch("select", $_selectedValues);
 </script>