ComboBox Custom Field Renderer Not Accepting Typed in Values

Hi,

I have a ComboBox custom field renderer for a time field. I have it set where the ComboBox has picklist values like “11:30:00.000Z” with a label of"11:30 AM". The user can select a value from the picklist options and it will be saved to Salesforce correctly.

However, right now if a user types in a value themselves like 11:30 AM it does not get saved to Salesforce and instead produces an error (“VFRemote.js:117 Visualforce Remoting Exception: List index out of bounds: 2”).

I’m trying to come up with a validation function that will validate the user-submitted value and will convert it to the value Salesforce is expecting, but I can’t figure out how to get this to work with the ComboBox. Is there a way that when a user types in a value for a ComboBox I can validate it and then add it to the picklist options as the selected option? Or is there a simpler way to handle these user submitted values?

I’ve recorded a short 2-minute video to show you the issue I am experiencing - https://screencast-o-matic.com/watch/cFih2NFUMr.

Custom Renderer Code:

var field = arguments[0],
    value = skuid.utils.decodeHTML(arguments[1]),
    $ = skuid.$;
field.element[0].className += ' TimeComboBox';
if (field.mode == 'edit') {
    var picklistEntries = picklistValues();
    field.metadata.picklistEntries = picklistEntries;
    var valueArray = searchPicklist(value, picklistEntries);
    // render the field as a picklist
    //skuid.ui.fieldRenderers.PICKLIST[field.mode](field,valueArray.value);
    
    // render the field as a combobox
    $.when(skuid.ui.fieldRenderers.COMBOBOX[field.mode](field, valueArray.value)).then(function() {
        var options = {
            translation: {
                'X': {
                    pattern: /[0-9]/,
                    optional: true
                },
                '6': {
                    pattern: /[0-6]/
                },
                'A': {
                    pattern: /A|P/i
                },
                'M': {
                    pattern: /M/i
                }
            },
            placeholder: "HH:MM AM/PM"
        };
        $('.TimeComboBox input').mask('0X:60 AM', options);
        $('.TimeComboBox input').off('blur.validation').on('blur.validation',inputValidation);
    });
} else {
    //use the default renderer
    skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field, value);
}
function picklistValues() {
    var quarterHours = ["00", "15", "30", "45"];
    var times = [];
    for (var i = 0; i < 24; i++) {
        for (var j = 0; j < 4; j++) {
            var hour = i < 10 ? "0" + i : i,
                twelveHour = i >= 13 ? i - 12 : i === 0 ? 12 : i,
                minute = quarterHours[j],
                AMPM = i <= 11 ? "AM" : "PM";
            var time = {
                value: hour + ':' + minute + ':00.000Z',
                label: twelveHour + ':' + minute + ' ' + AMPM,
                defaultValue: false,
                active: true
            };
            times.push(time);
        }
    }
    return times;
}
function searchPicklist(nameKey, myArray) {
    for (var i = 0; i < myArray.length; i++) {
        if (myArray[i].value === nameKey) {
            return myArray[i];
        }
    }
}
function inputValidation(){
    console.log('Validating', $(this).text(), $(this).val(), this);
}