From b66996b924e46c2113813d0a32552d13d3c4cc55 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Fri, 21 Feb 2020 21:27:55 +0000
Subject: [PATCH] bindable MDTextfield

---
 .../materialdesign-components/components.json     |  1 +
 .../src/Textfield/Textfield.svelte                | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/materialdesign-components/components.json b/packages/materialdesign-components/components.json
index e62d30f5ef..27b603aa32 100644
--- a/packages/materialdesign-components/components.json
+++ b/packages/materialdesign-components/components.json
@@ -188,6 +188,7 @@
     "description": "A Material Design textfield with multiple variants. Can also be converted to a text area / multine text field.",
     "props": {
       "onChange": "event",
+      "value": "string",
       "label": "string",
       "variant": "string",
       "disabled": "bool",
diff --git a/packages/materialdesign-components/src/Textfield/Textfield.svelte b/packages/materialdesign-components/src/Textfield/Textfield.svelte
index 2a1f74bc19..6592c88024 100644
--- a/packages/materialdesign-components/src/Textfield/Textfield.svelte
+++ b/packages/materialdesign-components/src/Textfield/Textfield.svelte
@@ -45,6 +45,8 @@
   export let cols = 40
   export let validation = false
   export let persistent = false
+  export let value
+  export let _bb
 
   let id = `${label}-${variant}`
 
@@ -87,6 +89,13 @@
   function focus(event) {
     tfInstance.focus()
   }
+
+  function changed(e) {
+    if (_bb.isBound(_bb.props.value)) {
+      _bb.setStateFromBinding(_bb.props.value, e.target.value)
+    }
+    _bb.call(onChange, e.target.value)
+  }
 </script>
 
 <!-- 
@@ -108,7 +117,8 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
         {placeholder}
         {minLength}
         {maxLength}
-        on:change={e => onChange(e.target.value)} />
+        value={value}
+        on:change={changed} />
     {:else}
       {#if renderLeadingIcon}
         <Icon {icon} />
@@ -122,9 +132,10 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
         placeholder={!!label && fullwidth ? label : placeholder}
         {minLength}
         {maxLength}
+        value={value}
         aria-label={`Textfield ${variant}`}
         on:focus={focus}
-        on:change={e => onChange(e.target.value)} />
+        on:change={changed} />
       {#if renderTrailingIcon}
         <Icon {icon} />
       {/if}