import tcombForm from 'tcomb-form/lib'
import en from 'tcomb-form/lib/i18n/en'
import SemanticUItemplates from 'tcomb-form-templates-semantic'
tcombForm.form.Form.i18n = en
tcombForm.form.Form.templates = SemanticUItemplates
const Car = tcombForm.enums.of('Audi Chrysler Ford Renault Peugeot');
const FormSchema = tcombForm.struct({
roomName: tcombForm.String,
location: tcombForm.String,
capacity: tcombForm.Number,
meetingType: Car
})
const options = {
fields: {
meetingType: {
//factory: tcombForm.form.Select,
options: [
{value: 'Audi', text: 'Audi'}, // an option
{value: 'Chrysler', text: 'Chrysler'},
{value: 'Ford', text: 'Ford'}
],
label: 'Meeting Type',
error: 'Invalid Meeting Type',
attrs: {
onBlur: () => {
console.log('onBlur');
}
}
},
}
};
We are using the above example to display 'Select' dropdown. We have also used Semantic UI for templating. But still it eventually renders a normal HTML select dropdown instead of Semantic UI template. It seems to render fine for other components like text field, radio buttons etc. But for some reason select doesn't seem to render the proper template
I tried to do the same using bootstrap templates, still the same result.
Is there something that we are doing wrong or there's an issue in select component ?
Version
Tell us which versions you are using:
tcomb-form v0.9.19
react v0.15.?
Expected behaviour
import tcombForm from 'tcomb-form/lib' import en from 'tcomb-form/lib/i18n/en' import SemanticUItemplates from 'tcomb-form-templates-semantic'
tcombForm.form.Form.i18n = en tcombForm.form.Form.templates = SemanticUItemplates
const Car = tcombForm.enums.of('Audi Chrysler Ford Renault Peugeot'); const FormSchema = tcombForm.struct({ roomName: tcombForm.String, location: tcombForm.String, capacity: tcombForm.Number, meetingType: Car })
const options = { fields: { meetingType: { //factory: tcombForm.form.Select, options: [ {value: 'Audi', text: 'Audi'}, // an option {value: 'Chrysler', text: 'Chrysler'}, {value: 'Ford', text: 'Ford'} ], label: 'Meeting Type', error: 'Invalid Meeting Type', attrs: { onBlur: () => { console.log('onBlur'); } } }, } }; We are using the above example to display 'Select' dropdown. We have also used Semantic UI for templating. But still it eventually renders a normal HTML select dropdown instead of Semantic UI template. It seems to render fine for other components like text field, radio buttons etc. But for some reason select doesn't seem to render the proper template
I tried to do the same using bootstrap templates, still the same result. Is there something that we are doing wrong or there's an issue in select component ?
Any help is much appreciated. Thank you