JSLink code to filter lookup columns work on a Custom list's new and edit item form but not on document library edit item form

Question

I am using JSLink code to filter lookup column to show relevant values. The same code works well on a custom list's edit form but breaks on the document library's edit form. I checked the ID of lookup column and its consistent across document library and custom list. Below is the code I am using, can someone please help me out to determine why its not working on a library edit form.

<script type="text/javascript">


    var FilterLookupHandler = (function () {
        var handler = function (fieldInternalName, queryField) {
            this.internalName = fieldInternalName;
            this.showField = queryField;
            this.suggestions = [];
            this.listId = "";
            this.currentValue;
        }
        handler.prototype.render = function (rCtx, field) {
            var self = this;
            self.renderContext = rCtx;
            if (rCtx != null && rCtx.CurrentItem != null) {
                var stringValue = rCtx.CurrentItem[rCtx.CurrentFieldSchema.Name];
                //self.currentValue = new SP.FieldLookupValue();
                //if (stringValue) {
                //    self.currentValue.set_lookupId(stringValue.split(";#")[0])
                //    stringValue = stringValue.split(";#")[1]
                //}
                self.listId = rCtx.CurrentFieldSchema.LookupListId;
            }
            if (rCtx == null || rCtx.CurrentFieldValue == null)
                return '';
            var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(rCtx);
            if (formCtx == null || formCtx.fieldSchema == null)
                return '';
            self.formCtx = formCtx;
            self.registerCallbacks();
            var htmlString = "";
            htmlString += "<select id='" + self.internalName + "_select'></select>";

            SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
                execCallFoItems(self);
            });
            return htmlString;
        }

        function execCallFoItems(handler) {
            handler.callForItems("Kensington Estates", "Eq");
        }
        handler.prototype.callForItems = function (filterValue, tag) {
            var self = this;
            var cctx = SP.ClientContext.get_current();
            var list = cctx.get_web().get_lists().getById(new SP.Guid(self.listId));
            var query = new SP.CamlQuery();
            query.set_viewXml('<View><Query><Where><' + tag + '><FieldRef Name=\'' + self.showField + '\'/>' +
                '<Value Type=\'Text\'>' + filterValue + '</Value></Geq></' + tag + '></Query><RowLimit>10</RowLimit></View>');
            self.suggestedItems = list.getItems(query);
            cctx.load(self.suggestedItems)
            cctx.executeQueryAsync(Function.createDelegate(self, self.suggestionsLoaded, Function.createDelegate(self, self.callFailed)))
        }
        handler.prototype.suggestionsLoaded = function (sender, args) {
            var self = this;
            var itemsEnumerator = self.suggestedItems.getEnumerator();
            self.suggestions = [];
            while (itemsEnumerator.moveNext()) {
                var item = itemsEnumerator.get_current();
                self.suggestions.push({
                    id: item.get_item("ID"),
                    value: item.get_item(self.internalName)
                })
            }
            self.updateSuggestions();
        }
        handler.prototype.updateSuggestions = function () {
            var self = this;
            var selectElement = document.getElementById(self.internalName + "_select");
            var optionsHtml = "";
            var liHtml = "";
            for (var i = 0; i < self.suggestions.length; i++) {
                var suggestion = self.suggestions[i];
                optionsHtml += "<option value='" + suggestion.id + "'>" + suggestion.value + "</option>";
                liHtml += "<li>" + suggestion.value + "</li>"
            }

            selectElement.innerHTML = optionsHtml;
            selectElement.onchange();
        }
        handler.prototype.callFailed = function (sender, args) {
            alert(args.get_message())
        }
        handler.prototype.registerCallbacks = function () {
            var self = this;
            self.formCtx.registerGetValueCallback(self.formCtx.fieldName, function () {
                return self.getCurrentValue();
            });
        }
        handler.prototype.getCurrentValue = function () {
            var selectedValue = document.getElementById(this.internalName + "_select").value;
            //this.currentValue.set_lookupId(selectedValue);
            //return this.currentValue;
            return selectedValue;
        }
        return handler;
    })();  


    (function () {
        if (typeof SPClientTemplates === 'undefined')
            return;
        var officeFieldHandler = new FilterLookupHandler("Company","Title");
        var OfficeFieldContext = {};
        OfficeFieldContext.Templates = {};
        OfficeFieldContext.Templates.Fields = {
            'Company1': {
                'EditForm': Function.createDelegate(officeFieldHandler, officeFieldHandler.render),
                'NewForm': Function.createDelegate(officeFieldHandler, officeFieldHandler.render)
            }
        };
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(OfficeFieldContext);
    })();  
</script>

thanks in advance.

Answer 1

Per my test, it works in library EditForm.aspx.

Are you using the same list as the source list of the lookup column?

The “Company1” from the code below is the column’s internal name. Ensure the internal name of your column in the document library is “Company1”.

OfficeFieldContext.Templates.Fields = {
            'Company1': {
                'EditForm': Function.createDelegate(officeFieldHandler, officeFieldHandler.render),
                'NewForm': Function.createDelegate(officeFieldHandler, officeFieldHandler.render)
            }
        };

To get the actual internal name for your column, browsing to the library Settings > Edit Column and look at the path.

The path will be like:

<site>/_layouts/15/FldEditEx.aspx?List=%7B<list GUID>%7D&Field=<column internal name>