ComboBox Custom Field Renderer Not Accepting Typed in Values


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 -

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
    // 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
    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);

I was able to figure it out. I didn’t realize that the value typed in manually had to match a value in the picklist entries of the ComboBox. I am going to build a validation function that once the value is validated it will add the picklist entry if it doesn’t automatically exist and then populate the field with the value. 

Hi Tim,

Would you be able to share the final version of the custom renderer?

Our client has the same requirement. I tried the one posted.

But I cannot see the time picklist for some reason.

Do I need to override the metadata for the Time field?

Thanks in advance.

Emily Jiang