From e25de45c4c2663af4cac329d895494c71390953c Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Mon, 24 Feb 2020 14:57:56 +0000
Subject: [PATCH] some MD component changes

---
 .../src/Common/Ripple.js                      |  2 +-
 .../src/Templates/indexDatatable.js           |  6 +----
 .../src/Templates/recordForm.js               | 22 ++++++++++++++-----
 .../src/Textfield/Textfield.svelte            | 15 ++++++++-----
 4 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/packages/materialdesign-components/src/Common/Ripple.js b/packages/materialdesign-components/src/Common/Ripple.js
index 6dc9cc96a7..2553bbca65 100644
--- a/packages/materialdesign-components/src/Common/Ripple.js
+++ b/packages/materialdesign-components/src/Common/Ripple.js
@@ -5,7 +5,7 @@ export default function ripple(
   props = { colour: "primary", unbounded: false }
 ) {
   node.classList.add("mdc-ripple-surface")
-  const component = new MDCRipple(node)
+  let component = new MDCRipple(node)
   component.unbounded = props.unbounded
 
   if (props.colour === "secondary") {
diff --git a/packages/materialdesign-components/src/Templates/indexDatatable.js b/packages/materialdesign-components/src/Templates/indexDatatable.js
index ac0cfe79ea..e6eee2f2bf 100644
--- a/packages/materialdesign-components/src/Templates/indexDatatable.js
+++ b/packages/materialdesign-components/src/Templates/indexDatatable.js
@@ -55,11 +55,7 @@ const dataCells = (index, indexSchema) =>
       {
         _component: "@budibase/standard-components/text",
         type: "none",
-        text: {
-          "##bbstate": `${dataItem(index)}.${col.name}`,
-          "##bbstatefallback": "",
-          "##bbsource": "context",
-        },
+        text: `context.${dataItem(index)}.${col.name}`,
       },
     ],
   }))
diff --git a/packages/materialdesign-components/src/Templates/recordForm.js b/packages/materialdesign-components/src/Templates/recordForm.js
index 46ac6479b8..25a040470c 100644
--- a/packages/materialdesign-components/src/Templates/recordForm.js
+++ b/packages/materialdesign-components/src/Templates/recordForm.js
@@ -7,8 +7,17 @@ export default ({ records }) =>
 const outerContainer = record => ({
   _component: "@budibase/standard-components/container",
   _code: "",
-  onLoad: [],
   type: "div",
+  onLoad: [
+    {
+      "##eventHandlerType": "Get New Record",
+      parameters: {
+        collectionKey: record.collectionKey,
+        childRecordType: record.name,
+        statePath: record.name,
+      },
+    },
+  ],
   _children: [
     heading(record),
     ...record.fields.map(f => field(record, f)),
@@ -33,7 +42,8 @@ const textField = (record, f) => ({
   disabled: false,
   fullwidth: false,
   colour: "primary",
-  maxLength: f.typeOptions && f.typeOptions.maxLength ? f.typeOptions.maxLength : 0,
+  maxLength:
+    f.typeOptions && f.typeOptions.maxLength ? f.typeOptions.maxLength : 0,
   placeholder: f.label,
   value: fieldValueBinding(record, f),
 })
@@ -57,15 +67,15 @@ const buttons = record => ({
     position: {
       column: ["", ""],
       row: ["", ""],
-      margin: ["","","",""],
-      padding: ["30px","","",""],
+      margin: ["", "", "", ""],
+      padding: ["30px", "", "", ""],
       height: [""],
       width: [""],
-      zindex: [""]
+      zindex: [""],
     },
     layout: {
       templaterows: [""],
-      templatecolumns: [""]
+      templatecolumns: [""],
     },
   },
   _children: [
diff --git a/packages/materialdesign-components/src/Textfield/Textfield.svelte b/packages/materialdesign-components/src/Textfield/Textfield.svelte
index 6592c88024..bd6cf9a0c2 100644
--- a/packages/materialdesign-components/src/Textfield/Textfield.svelte
+++ b/packages/materialdesign-components/src/Textfield/Textfield.svelte
@@ -18,7 +18,7 @@
   onMount(() => {
     if (!!tf) tfInstance = new MDCTextField(tf)
     return () => {
-      !!tfInstance && tf.tfInstance.destroy()
+      !!tfInstance && tf.tfInstance && tf.tfInstance.destroy()
       tf = null
     }
   })
@@ -79,6 +79,7 @@
   $: useNotchedOutline = variant == "outlined" || textarea
   $: renderLeadingIcon = useIcon && !trailingIcon
   $: renderTrailingIcon = useIcon && trailingIcon
+  $: safeMaxLength = maxLength <= 0 ? undefined : maxLength
 
   let props = { modifiers, customs }
   const blockClasses = cb.build({ props })
@@ -91,10 +92,12 @@
   }
 
   function changed(e) {
+    const val = e.target.value
+    value = val
     if (_bb.isBound(_bb.props.value)) {
-      _bb.setStateFromBinding(_bb.props.value, e.target.value)
+      _bb.setStateFromBinding(_bb.props.value, val)
     }
-    _bb.call(onChange, e.target.value)
+    _bb.call(onChange, val)
   }
 </script>
 
@@ -116,7 +119,7 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
         {required}
         {placeholder}
         {minLength}
-        {maxLength}
+        maxLength={safeMaxLength}
         value={value}
         on:change={changed} />
     {:else}
@@ -131,11 +134,11 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
         {required}
         placeholder={!!label && fullwidth ? label : placeholder}
         {minLength}
-        {maxLength}
+        maxLength={safeMaxLength}
         value={value}
         aria-label={`Textfield ${variant}`}
         on:focus={focus}
-        on:change={changed} />
+        on:input={changed} />
       {#if renderTrailingIcon}
         <Icon {icon} />
       {/if}