implement review comments

packages/bbui/src/Form/Core/Autocomplete.svelte

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

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}

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

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}

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"

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

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}
-      />
+        {autocomplete}
-    {: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)}
       />
     {:else if optionsType === "radio"}
       <RadioGroup

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
+  $: component = multiselect ? CoreMultiselect : CoreSelect
-    ? CoreMultiselect
-    : autocomplete
-    ? CoreAutocomplete
-    : 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}