From 10536a8c7d3e99e58ead1b5ff11347475e21349c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 5 Feb 2021 10:26:24 +0000
Subject: [PATCH] Allow form fields to have custom names

---
 .../PropertyControls/FormFieldSelect.svelte   | 32 +++++++++++++++++--
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
index 2c6119eb00..0e72cc4665 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
@@ -1,5 +1,5 @@
 <script>
-  import OptionSelect from "./OptionSelect.svelte"
+  import { DataList } from "@budibase/bbui"
   import {
     getDatasourceForProvider,
     getSchemaForDatasource,
@@ -18,7 +18,7 @@
     component => component._component === "@budibase/standard-components/form"
   )
   $: datasource = getDatasourceForProvider(form)
-  $: schema = getSchemaForDatasource(datasource).schema
+  $: schema = getSchemaForDatasource(datasource, true).schema
   $: options = getOptions(schema, type)
 
   const getOptions = (schema, fieldType) => {
@@ -28,6 +28,32 @@
     }
     return entries.map(entry => entry[0])
   }
+
+  const handleBlur = () => onChange(value)
 </script>
 
-<OptionSelect {value} {onChange} {options} />
+<div>
+  <DataList
+    editable
+    secondary
+    extraThin
+    on:blur={handleBlur}
+    on:change
+    bind:value>
+    <option value="" />
+    {#each options as option}
+      <option value={option}>{option}</option>
+    {/each}
+  </DataList>
+</div>
+
+<style>
+  div {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+  }
+  div :global(> div) {
+    flex: 1 1 auto;
+  }
+</style>