From 83dc6c5760485cd00d58c353f69e71200d5205f7 Mon Sep 17 00:00:00 2001
From: Tomasz Andres <CryptAlchemy@users.noreply.github.com>
Date: Wed, 29 Jun 2022 23:52:50 -0400
Subject: [PATCH 1/3] feat: add items prop, proper height and validation lib
 support to select

---
 packages/select/src/Select.svelte | 70 +++++++++++++++++++++++++++++--
 1 file changed, 67 insertions(+), 3 deletions(-)

diff --git a/packages/select/src/Select.svelte b/packages/select/src/Select.svelte
index 9dd46bb0b..1219b9ecc 100644
--- a/packages/select/src/Select.svelte
+++ b/packages/select/src/Select.svelte
@@ -1,5 +1,6 @@
 <div
   bind:this={element}
+  bind:clientWidth
   use:Ripple={{
     ripple: variant === 'filled',
     unbounded: false,
@@ -50,7 +51,10 @@
 >
   {#if hiddenInput}
     <input
-      type="hidden"
+      bind:this={input}
+      data-smui="true"
+      type="text"
+      style="display:none;"
       {required}
       {disabled}
       {value}
@@ -174,6 +178,7 @@
   </div>
 
   <Menu
+    style="min-width: {clientWidth ?? 0}px;"
     class={classMap({
       [menu$class]: true,
       'mdc-select__menu': true,
@@ -196,7 +201,17 @@
       {wrapFocus}
       bind:selectedIndex
       on:SMUIList:mount={(event) => (list = event.detail)}
-      {...prefixFilter($$restProps, 'list$')}><slot /></List
+      {...prefixFilter($$restProps, 'list$')}>
+        {#if items}
+          {#each items as item}
+            {#if item.name && item.value}
+              <Option value={item.value}>{item.name}</Option>
+            {:else}
+              <Option value={item}>{item}</Option>
+            {/if}
+          {/each}
+        {/if}
+      </List
     >
   </Menu>
 </div>
@@ -222,6 +237,7 @@
     MDCSelectIconFoundation,
     MDCSelectHelperTextFoundation,
   } from '@material/select';
+  import Option from './Option.svelte';
   import { MDCSelectFoundation } from '@material/select';
   import { onMount, onDestroy, getContext, setContext } from 'svelte';
   import { writable } from 'svelte/store';
@@ -250,6 +266,7 @@
   import NotchedOutline from '@smui/notched-outline';
 
   import HelperText from './helper-text/HelperText.svelte';
+  import Item from '@smui/list/src/Item.svelte';
 
   const forwardEvents = forwardEventsBuilder(get_current_component());
   interface UninitializedValue extends Function {}
@@ -258,6 +275,8 @@
     return value === uninitializedValue;
   }
 
+  export let input: any;
+
   // Remember to update types file if you add/remove/rename props.
   export let use: ActionArray = [];
   let className = '';
@@ -294,6 +313,9 @@
   export let dropdownIcon$use: ActionArray = [];
   export let dropdownIcon$class = '';
   export let menu$class = '';
+  export let items: any[] = [];
+
+  let clientWidth;
 
   let element: HTMLDivElement;
   let instance: MDCSelectFoundation;
@@ -303,6 +325,37 @@
   let selectAnchorAttrs: { [k: string]: string | undefined } = {};
   let selectText: HTMLSpanElement;
   let selectedIndex = -1;
+
+  // Set initial value on select that is already set (for form validation libs)
+  var didInputInitial = false;
+  $: if(input && !didInputInitial) {
+    didInputInitial = true;
+    value = input.value;
+  }
+
+  // If items array changes, reset value
+  let items_previous: any[] = [];
+  $: if (items !== items_previous) {
+    // Reset select value
+    value = '';
+
+    // Set previous items for comparison
+    items_previous = items;
+
+    // Trigger events
+    dispatch(getElement(), 'SMUISelect:change', {
+      value,
+      index: selectedIndex,
+    }, undefined, true);
+    // Trigger event for hidden input, as well
+    if(input) {
+      dispatch(input, 'SMUISelect:change', {
+        value,
+        index: selectedIndex,
+      }, undefined, true);
+    }
+  }
+
   let helperId: string | undefined = undefined;
   let addLayoutListener = getContext<AddLayoutListener | undefined>(
     'SMUI:addLayoutListener'
@@ -412,7 +465,10 @@
           // Don't update the instance again.
           previousSelectedIndex = index;
           selectedIndex = index;
-          value = getMenuItemValues()[selectedIndex];
+          
+          // Set the value without setting to "undefined"
+          var val = getMenuItemValues()[selectedIndex];
+          value = val ? val : '';
         },
         focusMenuItemAtIndex: (index) => {
           list.focusItemAtIndex(index);
@@ -448,6 +504,14 @@
             undefined,
             true
           );
+
+          // Trigger event for hidden input, as well
+          if(input) {
+            dispatch(input, 'SMUISelect:change', {
+              value,
+              index: selectedIndex,
+            }, undefined, true);
+          }
         },
 
         // getOutlineAdapterMethods

From 95a87ad618021ac57b99ae3064229c6c42c9c4f2 Mon Sep 17 00:00:00 2001
From: Tomasz Andres <CryptAlchemy@users.noreply.github.com>
Date: Fri, 1 Jul 2022 21:46:49 -0400
Subject: [PATCH 2/3] fix: resolve issue with form validation missing error

---
 packages/select/src/Select.svelte | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/select/src/Select.svelte b/packages/select/src/Select.svelte
index 1219b9ecc..e25def2fd 100644
--- a/packages/select/src/Select.svelte
+++ b/packages/select/src/Select.svelte
@@ -54,13 +54,19 @@
       bind:this={input}
       data-smui="true"
       type="text"
-      style="display:none;"
+      style="width: 100%;height: 100%;position: absolute;opacity: 0;"
       {required}
       {disabled}
       {value}
       {...prefixFilter($$restProps, 'input$')}
     />
   {/if}
+  <style>
+    input[data-smui="true"]:focus-visible {
+      outline: none;
+      caret-color: transparent;
+    }
+  </style>
   <div
     bind:this={selectAnchor}
     use:useActions={anchor$use}

From f1358f7934570a5e6a5ba49608245a2a21e0ad4b Mon Sep 17 00:00:00 2001
From: Tomasz Andres <CryptAlchemy@users.noreply.github.com>
Date: Tue, 5 Jul 2022 20:30:00 -0400
Subject: [PATCH 3/3] fix: resolve issue with comparing objects

---
 packages/select/src/Select.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/select/src/Select.svelte b/packages/select/src/Select.svelte
index e25def2fd..7e0b2795c 100644
--- a/packages/select/src/Select.svelte
+++ b/packages/select/src/Select.svelte
@@ -341,7 +341,7 @@
 
   // If items array changes, reset value
   let items_previous: any[] = [];
-  $: if (items !== items_previous) {
+  $: if (JSON.stringify(items) !== JSON.stringify(items_previous)) {
     // Reset select value
     value = '';