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) } @@ -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} {/if}