diff --git a/js/src/baseInput.js b/js/src/baseInput.js
index 87c64d1a..d149117b 100644
--- a/js/src/baseInput.js
+++ b/js/src/baseInput.js
@@ -7,9 +7,7 @@ const BaseInput = (($) => {
required: false
},
mdbFormGroup: {
- template: ``,
- required: true, // strongly recommended not to override
- autoCreate: true // strongly recommended not to override
+ template: ``
},
requiredClasses: [],
invalidComponentMatches: [],
@@ -30,8 +28,8 @@ const BaseInput = (($) => {
}
const FormControlSizeConversions = {
- 'form-control-lg': 'form-group-lg',
- 'form-control-sm': 'form-group-sm'
+ 'form-control-lg': 'mdb-form-group-lg',
+ 'form-control-sm': 'mdb-form-group-sm'
}
/**
@@ -65,16 +63,15 @@ const BaseInput = (($) => {
// Enforce required classes for a consistent rendering
this._rejectWithoutRequiredClasses()
- if (this.config.mdbFormGroup.autoCreate) {
- // Will create form-group if necessary
- this.autoCreateMdbFormGroup()
- }
-
- // different components have different rules, always run this separately
- this.$mdbFormGroup = this.findMdbFormGroup(this.config.mdbFormGroup.required)
+ // Resolve the form-group first, it will be used for mdb-form-group if possible
+ // note: different components have different rules
this.$formGroup = this.findFormGroup(this.config.formGroup.required)
- this._convertFormControlSizeVariations()
+ // Will add mdb-form-group to form-group or create an mdb-form-group
+ this.$mdbFormGroup = this.resolveMdbFormGroup()
+
+ // Signal to the mdb-form-group that a form-control-* variation is being used
+ this.resolveMdbFormGroupSizing()
this.addFocusListener()
this.addChangeListener()
@@ -164,12 +161,27 @@ const BaseInput = (($) => {
return (this.$element.val() === null || this.$element.val() === undefined || this.$element.val() === '')
}
- // Find or create a mdb-form-group if necessary
- autoCreateMdbFormGroup() {
- let fg = this.findMdbFormGroup(false)
- if (fg === undefined || fg.length === 0) {
- this.outerElement().wrap(this.config.mdbFormGroup.template)
+ // Will add mdb-form-group to form-group or create a mdb-form-group if necessary
+ resolveMdbFormGroup() {
+ let mfg = this.findMdbFormGroup(false)
+ if (mfg === undefined || mfg.length === 0) {
+ if (this.$formGroup === undefined || this.$formGroup.length === 0) {
+ // If a form-group doesn't exist (not recommended), take a guess and wrap the element (assuming no label).
+ // note: it's possible to make this smarter, but I need to see valid cases before adding any complexity.
+ this.outerElement().wrap(this.config.mdbFormGroup.template)
+ } else {
+ // a form-group does exist, add our marker class to it
+ this.$formGroup.addClass(ClassName.MDB_FORM_GROUP)
+
+ // OLD: may want to implement this after all, see how the styling turns out, but using an existing form-group is less manipulation of the dom and therefore preferable
+ // A form-group does exist, so add an mdb-form-group wrapping it's internal contents
+ //fg.wrapInner(this.config.mdbFormGroup.template)
+ }
+
+ mfg = this.findMdbFormGroup(true)
}
+
+ return mfg
}
// Demarcation element (e.g. first child of a form-group)
@@ -196,6 +208,22 @@ const BaseInput = (($) => {
return fg
}
+ // Due to the interconnected nature of labels/inputs/help-blocks, signal the mdb-form-group-* size variation based on
+ // a found form-control-* size
+ resolveMdbFormGroupSizing() {
+ if (!this.config.convertInputSizeVariations) {
+ return
+ }
+
+ // Modification - Change text-sm/lg to form-group-sm/lg instead (preferred standard and simpler css/less variants)
+ for (let inputSize in FormControlSizeConversions) {
+ if (this.$element.hasClass(inputSize)) {
+ //this.$element.removeClass(inputSize)
+ this.$mdbFormGroup.addClass(FormControlSizeConversions[inputSize])
+ }
+ }
+ }
+
// ------------------------------------------------------------------------
// private
_rejectInvalidComponentMatches() {
@@ -228,20 +256,6 @@ const BaseInput = (($) => {
}
}
- _convertFormControlSizeVariations() {
- if (!this.config.convertInputSizeVariations) {
- return
- }
-
- // Modification - Change text-sm/lg to form-group-sm/lg instead (preferred standard and simpler css/less variants)
- for (let inputSize in FormControlSizeConversions) {
- if (this.$element.hasClass(inputSize)) {
- this.$element.removeClass(inputSize)
- this.$mdbFormGroup.addClass(FormControlSizeConversions[inputSize])
- }
- }
- }
-
// ------------------------------------------------------------------------
// static
diff --git a/js/src/text.js b/js/src/text.js
index 9acf6304..8af457d8 100644
--- a/js/src/text.js
+++ b/js/src/text.js
@@ -60,21 +60,6 @@ const Text = (($) => {
// ------------------------------------------------------------------------
// protected
- // Find or create a mdb-form-group if necessary
- autoCreateMdbFormGroup() {
- let mfg = this.findMdbFormGroup(false)
- if (mfg === null || mfg.length === 0) {
- let fg = this.$formGroup
-
- if (fg === undefined || fg.length === 0) {
- // if a form-group doesn't exist (not recommended), just wrap the element.
- this.outerElement().wrap(this.config.mdbFormGroup.template)
- } else {
- // a form-group does exist, so add an mdb-form-group wrapping it's internal contents
- fg.wrapInner(this.config.mdbFormGroup.template)
- }
- }
- }
// ------------------------------------------------------------------------
// private