INTRODUCTION
My client has just upgraded their workstations to IE11. They’re currently running SharePoint 2010 for their Intranet and not looking to upgrade any time soon. So as you know, IE11 causes a lot of bugs. One of them is, the lookup drop-down control is not clickable if you have more than 10 items in the lookup list.
Some people suggest to put this tag:
<meta http-equiv=”X-UA-Compatible” content=”IE=8″ />
But this also introduces other bugs within the custom master page.
Another suggestion is to add the site in the Compatibility View Settings. Unfortunately, this is not always doing the job.
RESOLUTION
The only resolution I found was to use the JavaScript below. When a lookup drop-down is rendered, if the number of lookup items is less than 10 then it would render as a normal HTML Select. However, when items are more than 10, it renders as TextBox such as below:
<input name=”ctl00$m$g_0d06ad02_586f_4663_903f_f80a237ae8b9$ctl00$ctl05$ctl00$ctl00$ctl00$ctl04$ctl00$ctl01″ type=”text” value=”My Custom Field” id=”ctl00_m_g_0d06ad02_586f_4663_903f_f80a237ae8b9_ctl00_ctl05_ctl00_ctl00_ctl00_ctl04_ctl00_ctl01″ class=”ms-lookuptypeintextbox” onfocusout=”CoreInvoke(‘HandleLoseFocus’)” opt=”_Select” title=”My Custom Field” optHid=”MyCustomField_Hidden” onkeypress=”CoreInvoke(‘HandleChar’)” onkeydown=”CoreInvoke(‘HandleKey’)” match=”” choices=”(None)|0|LeadershipBlogImages|1|TESTVALUE1|11|TESTVALUE2|10|TESTVALUE3|12|Leadership Update Banner|2|TESTVALUE4|9|TESTVALUE5|7|Profile Test User|3|Test 1|13|Test 10|20|Test 11|21|Test 12|22|Test 13|23|Test 14|24|Test 15|25|Test 2|14|Test 3|15|Test 4|16|Test 5|17|Test 6|18|Test 7|4|Test 8|5|Test 9|19″ onchange=”CoreInvoke(‘HandleChange’)” />
Then it uses the CoreInvoke() method to transform it into a drop-down.
The resolution is to create a JavaScript that renders the TextBox above as a normal HTML combo box. Put below before the closing </body> tag:
NOTE: Please be mindful of the encoding of WordPress when you copy/paste the text below. I suggest you copy/paste to Notepad first and fix some of the encoded characters before you use it on your master page.
<script type=”text/javascript”>
var scriptQuery = jQuery.noConflict();
scriptQuery(“input[class=’ms-lookuptypeintextbox’]”).each(function () {
var columnName = scriptQuery(this).attr(‘title’);
OverrideDropDownList(columnName);
});
// Main Function
function OverrideDropDownList(columnName) {
// Construct a drop down list object
var lookupDDL = new DropDownList(columnName);
// Do this only in complex mode…
if (lookupDDL.Type == “C”) {
// Hide the text box and drop down arrow
lookupDDL.Obj.css(‘display’, ‘none’);
lookupDDL.Obj.next(“img”).css(‘display’, ‘none’);
// Construct the simple drop down field with change trigger
var tempDDLName = “_” + columnName;
if (lookupDDL.Obj.parent().find(“select[ID='” + tempDDLName + “‘]”).length == 0) {
lookupDDL.Obj.parent().append(“<select name='” + tempDDLName + “‘ id='” + tempDDLName + “‘ title='” + tempDDLName + “‘></select>”);
lookupDDL.Obj.parent().find(“select[ID='” + tempDDLName + “‘]”).bind(“change”, function () {
updateOriginalField(columnName, tempDDLName);
});
}
// Get all the options
var splittedChoices = lookupDDL.Obj.attr(‘choices’).split(“|”);
// get selected value
var hiddenVal = scriptQuery(‘input[name=’ + lookupDDL.Obj.attr(“optHid”) + ‘]’).val();
if (hiddenVal == “0”) {
hiddenVal = lookupDDL.Obj.attr(“value”);
}
// Replacing the drop down object with the simple drop down list
lookupDDL = new DropDownList(tempDDLName);
// Populate the drop down list
for (var i = 0; i < splittedChoices.length; i++) {
var optionVal = splittedChoices[i];
i++;
var optionId = splittedChoices[i];
var selected = (optionId == hiddenVal) ? ” selected=’selected'” : “”;
lookupDDL.Obj.append(“<option” + selected + ” value='” + optionId + “‘>” + optionVal + “</option>”);
}
}
}
// method to update the original and hidden field.
function updateOriginalField(child, temp) {
var childSelect = new DropDownList(child);
var tempSelect = new DropDownList(temp);
// Set the text box
childSelect.Obj.attr(“value”, tempSelect.Obj.find(“option:selected”).val());
// Get Hidden ID
var hiddenId = childSelect.Obj.attr(“optHid”);
// Update the hidden variable
scriptQuery(‘input[name=’ + hiddenId + ‘]’).val(tempSelect.Obj.find(“option:selected”).val());
}
// just to construct a drop down box object. Idea taken from SPServces
function DropDownList(colName) {
if ((this.Obj = scriptQuery(“input[Title='” + colName + “‘]”)).html() != null) {
this.Type = “C”;
// Multi-select: This will find the multi-select column control on English and most other languages sites where the Title looks like ‘Column Name possible values’
}
// Simple – when they are less than 20 items
if ((this.Obj = scriptQuery(“select[Title='” + colName + “‘]”)).html() != null) {
this.Type = “S”;
// Compound – when they are more than 20 items
}
else if ((this.Obj = scriptQuery(“input[Title='” + colName + “‘]”)).html() != null) {
this.Type = “C”;
// Multi-select: This will find the multi-select column control on English and most other languages sites where the Title looks like ‘Column Name possible values’
}
else if ((this.Obj = scriptQuery(“select[ID$=’SelectCandidate’][Title^='” + colName + ” ‘]”)).html() != null) {
this.Type = “M”;
// Multi-select: This will find the multi-select column control on a Russian site (and perhaps others) where the Title looks like ‘Russion stuff: Column Name’
}
else if ((this.Obj = scriptQuery(“select[ID$=’SelectCandidate’][Title$=’: ” + colName + “‘]”)).html() != null) {
this.Type = “M”;
}
else
this.Type = null;
}
</script>
Please note that I grabbed the code above from TechNet article:
https://social.technet.microsoft.com/Forums/sharepoint/en-US/c5b179e3-6ebd-4d08-91c5-54155c50e376/lookup-type-field-rendered-as-input-instead-of-select-in-ie?forum=sharepointgeneralprevious
Hope this helps,
Tommy
