From 6aaf73788d871fa3423ee693c9e0a723bac0553e Mon Sep 17 00:00:00 2001
From: Maurits Lourens <maurits.lourens@gmail.com>
Date: Tue, 17 Aug 2021 15:13:57 +0200
Subject: [PATCH] implement review comments

---
 .../bbui/src/Form/Core/Autocomplete.svelte    | 80 -------------------
 .../bbui/src/Form/Core/Multiselect.svelte     |  2 +
 packages/bbui/src/Form/Core/Picker.svelte     |  3 +-
 packages/bbui/src/Form/Core/Select.svelte     |  2 +
 packages/bbui/src/Form/Core/index.js          |  1 -
 packages/standard-components/manifest.json    | 14 +++-
 .../src/forms/OptionsField.svelte             | 14 +---
 .../src/forms/RelationshipField.svelte        |  9 +--
 8 files changed, 21 insertions(+), 104 deletions(-)
 delete mode 100644 packages/bbui/src/Form/Core/Autocomplete.svelte

diff --git a/packages/bbui/src/Form/Core/Autocomplete.svelte b/packages/bbui/src/Form/Core/Autocomplete.svelte
deleted file mode 100644
index ea36d82463..0000000000
--- a/packages/bbui/src/Form/Core/Autocomplete.svelte
+++ /dev/null
@@ -1,80 +0,0 @@
-<script>
-  import { createEventDispatcher } from "svelte"
-  import Picker from "./Picker.svelte"
-
-  export let value = null
-  export let id = null
-  export let selectPlaceholder = "Choose an option"
-  export let autocompletePlaceholder = "Search an option"
-  export let disabled = false
-  export let error = null
-  export let options = []
-  export let getOptionLabel = option => option
-  export let getOptionValue = option => option
-  export let getOptionIcon = () => null
-  export let readonly = false
-  export let quiet = false
-  export let autoWidth = false
-
-  const dispatch = createEventDispatcher()
-  let open = false
-  $: fieldText = getFieldText(value, options, selectPlaceholder)
-  $: fieldIcon = getFieldIcon(value, options, selectPlaceholder)
-
-  const getFieldText = (value, options, placeholder) => {
-    // Always use placeholder if no value
-    if (value == null || value === "") {
-      return placeholder || "Choose an option"
-    }
-
-    // Wait for options to load if there is a value but no options
-    if (!options?.length) {
-      return ""
-    }
-
-    // Render the label if the selected option is found, otherwise raw value
-    const index = options.findIndex(
-      (option, idx) => getOptionValue(option, idx) === value
-    )
-    return index !== -1 ? getOptionLabel(options[index], index) : value
-  }
-
-  const getFieldIcon = (value, options) => {
-    // Wait for options to load if there is a value but no options
-    if (!options?.length) {
-      return ""
-    }
-    const index = options.findIndex(
-      (option, idx) => getOptionValue(option, idx) === value
-    )
-    return index !== -1 ? getOptionIcon(options[index], index) : null
-  }
-
-  const selectOption = value => {
-    dispatch("change", value)
-    open = false
-  }
-</script>
-
-<Picker
-  on:click
-  bind:open
-  {quiet}
-  {id}
-  {error}
-  {disabled}
-  {readonly}
-  {fieldText}
-  {options}
-  {autoWidth}
-  {getOptionLabel}
-  {getOptionValue}
-  {getOptionIcon}
-  {fieldIcon}
-  autocomplete={true}
-  isPlaceholder={value == null || value === ""}
-  {autocompletePlaceholder}
-  placeholderOption={selectPlaceholder}
-  isOptionSelected={option => option === value}
-  onSelectOption={selectOption}
-/>
diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte
index 107e910a60..94d4f2b768 100644
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@@ -11,6 +11,7 @@
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
   export let readonly = false
+  export let autocomplete = false
 
   const dispatch = createEventDispatcher()
   $: selectedLookupMap = getSelectedLookupMap(value)
@@ -77,6 +78,7 @@
   {fieldText}
   {options}
   isPlaceholder={!value?.length}
+  {autocomplete}
   {isOptionSelected}
   {getOptionLabel}
   {getOptionValue}
diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index ce08a33c59..5c2251e77f 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -14,7 +14,6 @@
   export let fieldIcon = ""
   export let isPlaceholder = false
   export let placeholderOption = null
-  export let autocompletePlaceholder = ""
   export let options = []
   export let isOptionSelected = () => false
   export let onSelectOption = () => {}
@@ -120,7 +119,7 @@
         on:change={event => (searchTerm = event.detail)}
         updateOnChange="true"
         {disabled}
-        placeholder={autocompletePlaceholder}
+        placeholder="Search"
       />
     {/if}
     <ul class="spectrum-Menu" role="listbox">
diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
index a815ae2948..3a2daf25cf 100644
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -14,6 +14,7 @@
   export let readonly = false
   export let quiet = false
   export let autoWidth = false
+  export let autocomplete = false
 
   const dispatch = createEventDispatcher()
   let open = false
@@ -70,6 +71,7 @@
   {getOptionValue}
   {getOptionIcon}
   {fieldIcon}
+  {autocomplete}
   isPlaceholder={value == null || value === ""}
   placeholderOption={placeholder}
   isOptionSelected={option => option === value}
diff --git a/packages/bbui/src/Form/Core/index.js b/packages/bbui/src/Form/Core/index.js
index 8e57ed26a7..a31c5941ec 100644
--- a/packages/bbui/src/Form/Core/index.js
+++ b/packages/bbui/src/Form/Core/index.js
@@ -9,4 +9,3 @@ export { default as CoreSwitch } from "./Switch.svelte"
 export { default as CoreSearch } from "./Search.svelte"
 export { default as CoreDatePicker } from "./DatePicker.svelte"
 export { default as CoreDropzone } from "./Dropzone.svelte"
-export { default as CoreAutocomplete } from "./Autocomplete.svelte"
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index ad37674a0e..95f41a85ef 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1915,10 +1915,6 @@
             "label": "Select",
             "value": "select"
           },
-          {
-            "label": "Autocomplete",
-            "value": "autocomplete"
-          },
           {
             "label": "Radio buttons",
             "value": "radio"
@@ -1930,6 +1926,16 @@
         "label": "Default value",
         "key": "defaultValue"
       },
+      {
+        "type": "boolean",
+        "label": "Autocomplete",
+        "key": "autocomplete",
+        "defaultValue": false,
+        "dependsOn": {
+          "setting": "optionsType",
+          "value": "select"
+        }
+      },
       {
         "type": "boolean",
         "label": "Disabled",
diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte
index 1cfc8fcd6b..6774e1d267 100644
--- a/packages/standard-components/src/forms/OptionsField.svelte
+++ b/packages/standard-components/src/forms/OptionsField.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { CoreAutocomplete, CoreSelect, RadioGroup } from "@budibase/bbui"
+  import { CoreSelect, RadioGroup } from "@budibase/bbui"
   import Field from "./Field.svelte"
 
   export let field
@@ -14,6 +14,7 @@
   export let labelColumn
   export let valueColumn
   export let customOptions
+  export let autocomplete = false
 
   let fieldState
   let fieldApi
@@ -85,16 +86,7 @@
         on:change={e => fieldApi.setValue(e.detail)}
         getOptionLabel={flatOptions ? x => x : x => x.label}
         getOptionValue={flatOptions ? x => x : x => x.value}
-      />
-    {:else if optionsType === "autocomplete"}
-      <CoreAutocomplete
-        value={$fieldState.value}
-        id={$fieldState.fieldId}
-        disabled={$fieldState.disabled}
-        error={$fieldState.error}
-        options={fieldSchema?.constraints?.inclusion ?? []}
-        {placeholder}
-        on:change={e => fieldApi.setValue(e.detail)}
+        {autocomplete}
       />
     {:else if optionsType === "radio"}
       <RadioGroup
diff --git a/packages/standard-components/src/forms/RelationshipField.svelte b/packages/standard-components/src/forms/RelationshipField.svelte
index add000b5ad..b8600513ad 100644
--- a/packages/standard-components/src/forms/RelationshipField.svelte
+++ b/packages/standard-components/src/forms/RelationshipField.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { CoreAutocomplete, CoreSelect, CoreMultiselect } from "@budibase/bbui"
+  import { CoreSelect, CoreMultiselect } from "@budibase/bbui"
   import { getContext } from "svelte"
   import Field from "./Field.svelte"
 
@@ -25,11 +25,7 @@
   $: fetchTable(linkedTableId)
   $: singleValue = flatten($fieldState?.value)?.[0]
   $: multiValue = flatten($fieldState?.value) ?? []
-  $: component = multiselect
-    ? CoreMultiselect
-    : autocomplete
-    ? CoreAutocomplete
-    : CoreSelect
+  $: component = multiselect ? CoreMultiselect : CoreSelect
 
   const fetchTable = async id => {
     if (id) {
@@ -82,6 +78,7 @@
     <svelte:component
       this={component}
       {options}
+      {autocomplete}
       value={multiselect ? multiValue : singleValue}
       on:change={multiselect ? multiHandler : singleHandler}
       id={$fieldState.fieldId}