bugfix: MD Select - ensure value is selected via value prop

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 ||

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}>

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",
       },
     ],
   },