selectfield using svelte select

packages/web/src/forms/FormSelectFieldRaw.svelte

@@ -3,8 +3,15 @@
   import SelectField from './SelectField.svelte';
 
   export let name;
+  export let isClearable = false;
 
   const { values, setFieldValue } = getFormContext();
 </script>
 
-<SelectField {...$$restProps} value={$values[name]} on:change={e => setFieldValue(name, e.target['value'])} />
+<SelectField
+  {...$$restProps}
+  value={$values[name]}
+  on:change={e => setFieldValue(name, e.detail)}
+  {isClearable}
+  
+/>

packages/web/src/forms/SelectField.svelte

@@ -1,14 +1,57 @@
 <script lang="ts">
-  import _ from 'lodash';
+  import _, { map } from 'lodash';
+  import SvelteSelect from 'svelte-select';
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
 
   export let options = [];
   export let value;
+  export let isNative = false;
+  export let isMulti = false;
+
+  let listOpen = false;
+  let isFocused = false;
+
+  $: {
+    if (!listOpen && isFocused && isMulti) listOpen = true;
+  }
 </script>
 
-<select {...$$restProps} on:change>
-  {#each _.compact(options) as x (x.value)}
-    <option value={x.value} selected={value == x.value}>
-      {x.label}
-    </option>
-  {/each}
-</select>
+{#if isNative}
+  <select
+    {...$$restProps}
+    on:change={e => {
+      dispatch('change', e.target['value']);
+    }}
+  >
+    {#each _.compact(options) as x (x.value)}
+      <option value={x.value} selected={value == x.value}>
+        {x.label}
+      </option>
+    {/each}
+  </select>
+{:else}
+  <SvelteSelect
+    {...$$restProps}
+    items={options}
+    selectedValue={isMulti
+      ? value?.map(item => options.find(x => x.value == item))
+      : options.find(x => x.value == value)}
+    on:select={e => {
+      if (isMulti) {
+        dispatch(
+          'change',
+          e.detail?.map(x => x.value)
+        );
+      } else {
+        dispatch('change', e.detail.value);
+      }
+    }}
+    showIndicator={!isMulti}
+    isClearable={isMulti}
+    {isMulti}
+    bind:listOpen
+    bind:isFocused
+  />
+{/if}