binding interface now only updates when the dropdown is closed

packages/builder/package.json

@@ -17,7 +17,7 @@
     "cy:test": "start-server-and-test cy:setup http://localhost:4001/_builder cy:run",
     "cy:ci": "start-server-and-test cy:setup http://localhost:4001/_builder cy:run:ci"
   },
- "jest": {
+  "jest": {
     "globals": {
       "GLOBALS": {
         "client": "web"
@@ -57,7 +57,7 @@
     ]
   },
   "dependencies": {
-    "@budibase/bbui": "^1.23.1",
+    "@budibase/bbui": "^1.27.0",
     "@budibase/client": "^0.1.17",
     "@budibase/colorpicker": "^1.0.1",
     "@nx-js/compiler-util": "^2.0.0",

packages/builder/src/components/userInterface/PropertyControl.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { Icon } from "@budibase/bbui"
+  import Input from "components/common/Input.svelte"
   import { store, backendUiStore } from "builderStore"
   import fetchBindableProperties from "builderStore/fetchBindableProperties"
   import { DropdownMenu } from "@budibase/bbui"
@@ -12,13 +14,17 @@
   export let props = {}
   export let onChange = () => {}
 
+  let temporaryBindableValue = value
+
+  function handleClose() {
+    handleChange(key, temporaryBindableValue)
+  }
+
   let bindableProperties
 
   let anchor
   let dropdown
 
-  $: console.log()
-
   async function getBindableProperties() {
     // Get all bindableProperties
     bindableProperties = fetchBindableProperties({
@@ -98,14 +104,24 @@
       {...props}
       name={key} />
   </div>
-  <button on:click={dropdown.show}>O</button>
+  {#if control == Input}
+    <button on:click={dropdown.show}>
+      <Icon name="edit" />
+    </button>
+  {/if}
 </div>
-<DropdownMenu bind:this={dropdown} {anchor} align="right">
+{#if control == Input}
-  <BindingDropdown
+  <DropdownMenu
-    {...handlevalueKey(value)}
+    on:close={handleClose}
-    on:update={e => handleChange(key, e.detail)}
+    bind:this={dropdown}
-    {bindableProperties} />
+    {anchor}
-</DropdownMenu>
+    align="right">
+    <BindingDropdown
+      {...handlevalueKey(value)}
+      on:update={e => (temporaryBindableValue = e.detail)}
+      {bindableProperties} />
+  </DropdownMenu>
+{/if}
 
 <style>
   .property-control {
@@ -139,8 +155,11 @@
     position: absolute;
     background: none;
     border: none;
-    right: 0px;
+    border-radius: 50%;
-    top: 0;
+    height: 24px;
-    bottom: 0;
+    width: 24px;
+    background: rgb(224, 224, 224);
+    right: 5px;
+    --spacing-s: 0;
   }
 </style>

packages/builder/yarn.lock

@@ -987,10 +987,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@budibase/bbui@^1.23.1":
+"@budibase/bbui@^1.27.0":
-  version "1.23.1"
+  version "1.27.0"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.23.1.tgz#232b0d31379ef64afe5e76f477d5489e67defc22"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.27.0.tgz#948102a29c203c503745c69c2cdea4440e257a74"
-  integrity sha512-L5KbkBPbTaPUGUEM33hxV2G8R6e+ckBZmph6LnjLsI6a5Bs0hWPv6pYHukeiOMXLPyGlF+ShIfYgoFHi+GRRGA==
+  integrity sha512-7YPWD9gASfUiAmPsvYdGvBtVOdVoOKFRV+q3on8mZ9v/NlupZ2gVJy4m6NsRuoCJBhRF1Uq6bR716KFFxqZXVg==
   dependencies:
     sirv-cli "^0.4.6"