Reactively switch between select and free-text

I am trying to make a form that reactively switches between a select and a free-text input field.

I have the functionality working by using a helper to dynamically set the options as such:

// jade syntax
+afFieldInput(name='actualValue' placeholder='Tag value' options=tagDefValues)

// js
Template.AutoFormTemplate.helpers({
    tagDefValues: function() {
        const tagKey = AutoForm.getFieldValue('actualKey', 'tagInsertForm');
        if (tagKey) {
            const td = TagDefs.findOne({lowerKey: tagKey.toLowerCase()});
            if (td && td.valueSet && td.valueSet.entries && td.valueSet.entries.length > 0) {
                return td.valueSet.entries.map(function(entry) {
                    return {label: entry, value: entry};
                });
            }
        }
    }
});

The functionality works, however, when the options change and the afFieldInput changes from a select to a text input, it inserts a new afFieldInput into the UI and the old one is still there, but non functional.

(Started with only one of the inputs on the right side) ctdemo

Everything works beautifully, but this is a major UI issue.

I believe this has something to do with autoform-materialize because I can see the

djhi / meteor-autoform-materialize

Reactively switch between select and free-text #89