From 6be190e5dd8d165aeccc2bf0e51cdb74713b6c36 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Wed, 4 Mar 2020 23:03:51 +0000
Subject: [PATCH] bugfix: MD Select - ensure value is selected via value prop

---
 .../src/List/ListItem.svelte                  | 24 +++++++++++------
 .../src/Select/Select.svelte                  | 27 ++++++++++---------
 .../src/Test/props.js                         |  7 ++---
 3 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/packages/materialdesign-components/src/List/ListItem.svelte b/packages/materialdesign-components/src/List/ListItem.svelte
index f60396ae4d..deae994b7f 100644
--- a/packages/materialdesign-components/src/List/ListItem.svelte
+++ b/packages/materialdesign-components/src/List/ListItem.svelte
@@ -27,6 +27,15 @@
 
   let role = "option"
 
+  const itemData = () => ({
+    _id,
+    value,
+    text,
+    secondaryText,
+    selected,
+    disabled,
+  })
+
   onMount(() => {
     _id = generate()
 
@@ -35,20 +44,19 @@
     listProps = _bb.getContext("BBMD:list:props")
 
     let context = _bb.getContext("BBMD:list:context")
+    const _addItem = _bb.getContext("BBMD:list:addItem")
+
     if (context === "menu") {
       role = "menuitem"
     }
+
+    if (_addItem) {
+      _addItem(itemData())
+    }
   })
 
   function handleClick() {
-    let item = {
-      _id,
-      value,
-      text,
-      secondaryText,
-      selected,
-      disabled,
-    }
+    let item =  itemData()
     if (!disabled) {
       if (
         listProps.singleSelection ||
diff --git a/packages/materialdesign-components/src/Select/Select.svelte b/packages/materialdesign-components/src/Select/Select.svelte
index e6bf7c9e01..c9b4a3bd91 100644
--- a/packages/materialdesign-components/src/Select/Select.svelte
+++ b/packages/materialdesign-components/src/Select/Select.svelte
@@ -16,8 +16,8 @@
   let select
   let selectList
   let instance
-
   let _helperId = ""
+  let listItems = []
 
   export let _bb
   export let onSelect = items => {}
@@ -32,19 +32,18 @@
 
   onMount(() => {
     _bb.setContext("BBMD:list:props", { singleSelection: true })
+    _bb.setContext("BBMD:list:addItem", i => listItems = [...listItems, i])
 
-    const setValue = v => {
-      _bb.setStateFromBinding(_bb.props.value, v)
-      value = v
-    }
     selectedItemsStore = createItemsStore(() => {
 
-      if($selectedItemsStore && $selectedItemsStore.length > 0) 
-        setValue($selectedItemsStore[0].value)
-      else 
-        setValue("")
+      const v = $selectedItemsStore && $selectedItemsStore.length > 0
+                ? $selectedItemsStore[0].value
+                : "";
+
+      value = v
+      _bb.setStateFromBinding(_bb.props.value, v)
+      _bb.call(onSelect, v)
       
-      _bb.call(onSelect, $selectedItemsStore)
     })
     _bb.setContext("BBMD:list:selectItemStore", selectedItemsStore)
 
@@ -59,15 +58,19 @@
     }
   })
 
+
   $: useNotchedOutline = variant === "outlined"
   $: selectList && _bb.attachChildren(selectList)
+  
 
   $: modifiers = { variant, disabled, required, noLabel: !label }
   $: props = { modifiers }
   $: selectClass = cb.build({ props })
-  $: if (value !== undefined && selectedItemsStore) {
-    selectedItemsStore.addSingleItem(value)
+  $: if (value !== undefined && instance && listItems.length > 0) {
+    instance.selectedIndex = listItems.findIndex(i => i.value === value)
   }
+  
+
 </script>
 
 <div bind:this={select} id={_helperId} class={selectClass}>
diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js
index 657dad4d3d..aa55c680fb 100644
--- a/packages/materialdesign-components/src/Test/props.js
+++ b/packages/materialdesign-components/src/Test/props.js
@@ -166,25 +166,26 @@ export const props = {
     label: "Choose a Milkshake",
     helperText: "Choose a flavour",
     persistent: true,
+    value: "1",
     onSelect: selectedItem => console.log("SELECT ITEM", selectedItem),
     _children: [
       {
         _component: "@budibase/materialdesign-components/ListItem",
         _children: [],
         text: "Orange",
-        value: 0,
+        value: "0",
       },
       {
         _component: "@budibase/materialdesign-components/ListItem",
         _children: [],
         text: "Apple",
-        value: 1,
+        value: "1",
       },
       {
         _component: "@budibase/materialdesign-components/ListItem",
         _children: [],
         text: "Berry",
-        value: 0,
+        value: "2",
       },
     ],
   },