SharePoint Lookup Drop-Down Cannot Be Clicked in IE11

Posted in: Blog, SharePoint 2010, SharePoint 2010 Errors, SharePoint 2013, SharePoint 2013 Errors | May 17, 2016 at 2:05 PM

No comments

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

No Comments Yet.