Currently, I am working on developing a personalized autocomplete type feature for the afQuickfield in my Meteor project. The main issue I am facing is that when I specify the type="autocomplete" on the afQuickfield, the class="form-control" attribute seems to be missing. Interestingly, it is present for all other field types.
In my attempt to resolve this issue, I searched for the term form-control throughout the entire codebases for both the meteor-autoform and the scss as well as js directories of the bootstrap library. The results only showed occurrences in the changelog and in class definitions within the scss/css files.
One possible solution could be simply adding class="form-control" to the afQuickfield definition. However, I am hesitant to resort to such a quick-fix approach.
I am seeking assistance in understanding how the form-control attribute is assigned in autoForm fields. Any insights would be greatly appreciated.
Below is a snippet of my custom autocomplete code (still a work in progress). I am starting with a basic text element with the appropriate atts and plan to build upon it:
// autocomplete.js
AutoForm.addInputType('autocomplete', {
template: 'afAutocomplete',
valueOut: function () {
return this.val()
},
valueConverters: {
stringArray: AutoForm.valueConverters.stringToStringArray,
number: AutoForm.valueConverters.stringToNumber,
numberArray: AutoForm.valueConverters.stringToNumberArray,
boolean: AutoForm.valueConverters.stringToBoolean,
booleanArray: AutoForm.valueConverters.stringToBooleanArray,
date: AutoForm.valueConverters.stringToDate,
dateArray: AutoForm.valueConverters.stringToDateArray
},
contextAdjust: function (context) {
context.atts.autocomplete = 'off'
return context
}
})
// autocomplete.html
<template name="afAutocomplete">
<input type="text" value="{{this.value}}" {{this.atts}} />
</template>
For comparison purposes, here is the code snippet from the type="text" field:
// text.js
AutoForm.addInputType('text', {
template: 'afInputText',
valueOut: function () {
return this.val()
},
valueConverters: {
stringArray: AutoForm.valueConverters.stringToStringArray,
number: AutoForm.valueConverters.stringToNumber,
numberArray: AutoForm.valueConverters.stringToNumberArray,
boolean: AutoForm.valueConverters.stringToBoolean,
booleanArray: AutoForm.valueConverters.stringToBooleanArray,
date: AutoForm.valueConverters.stringToDate,
dateArray: AutoForm.valueConverters.stringToDateArray
},
contextAdjust: function (context) {
if (typeof context.atts.maxlength === 'undefined' && typeof context.max === 'number') {
context.atts.maxlength = context.max
}
return context
}
})
// text.html
<template name="afInputText">
<input type="text" value="{{this.value}}" {{this.atts}}/>
</template>
It is evident that these two are quite similar, yet the autocomplete version lacks the form-control class in the actual HTML output.
If you have any suggestions or solutions, please feel free to share them. Thank you!