Using CSS3 with SharePoint 2010 causes issue with people picker

Question

I am trying to develop a jQuery based NewForm for a SharePoint 2010 list. Our staff all have IE 11 running in compatibility mode.

I force IE to use a CSS3 compatible version by editing the sites master file by adding.

<meta http-equiv=X-UA-Compatible content="IE=10 />

I have everything working fine except the people picker.

I can search or add a person by typing into the people pickers text box, but I am unable to click back into the text box to delete the entry after the check names function has been run.

I can see that once it's linked an entry to an account it is no longer adding ; add the end of the person. If I manually add ; before I click to confirm the account, I can click back in and delete the person fine.

Everything works fine in Firefox or Chrome but we are stuck with IE :(

Anyone have a way around this?

Answer 1

This is a known problem. With SP2010, IE 11 should be in IE8 compatibility.

Check this link, and read the solution ;) People Picker/Edit Web Parts/More not working in IE11

Answer 2

I just happen to have a great blog post on this.

It's not only people pickers that break, it's also rich text editors (and god knows what else).

Many blog posts will tell you to revert back to IE8 mode, but you can actually override the ootb function that breaks with a fixed version.

Anyway, for the sake of having the full answer (or my blog exploding) I'll post the particular script for people picker here (entityeditor.ie9fix.js).

function ConvertEntityToSpan(ctx, entity)
{ULSGjk:;
    if(matches[ctx]==null)
        matches[ctx]=new Array();
    var key=entity.getAttribute("Key");
    var displayText=entity.getAttribute("DisplayText");
    var isResolved=entity.getAttribute("IsResolved");
    var description=entity.getAttribute("Description");
    var style='ms-entity-unresolved';
    if(isResolved=='True')
        style='ms-entity-resolved';
    var spandata="<span id='span"+STSHtmlEncode(key)+"' isContentType='true' tabindex='-1' class='"+style+"' ";
    if (browseris.ie8standard)
        spandata+="onmouseover='this.contentEditable=false;' onmouseout='this.contentEditable=true;' contentEditable='true' ";
    else
        spandata+="contentEditable='false' ";
    spandata+="title='"+STSHtmlEncode(description)+"'>"
    spandata+="<div style='display:none;' id='divEntityData' ";
    spandata+="key='"+STSHtmlEncode(key)+"' displaytext='"+STSHtmlEncode(displayText)+"' isresolved='"+STSHtmlEncode(isResolved)+"' ";
    spandata+="description='"+STSHtmlEncode(description)+"'>";
    var multipleMatches=EntityEditor_SelectSingleNode(entity, "MultipleMatches");
    matches[ctx][key]=multipleMatches;
    var extraData=EntityEditor_SelectSingleNode(entity, "ExtraData");
    if(extraData)
    {
        var data;
        if(extraData.firstChild)
            data=extraData.firstChild.xml;
        if(!data) data=extraData.innerXml || extraData.innerHTML;
        if(!data && document.implementation && document.implementation.createDocument)
        {
            var serializer=new XMLSerializer();
            data=serializer.serializeToString(extraData.firstChild);

                    // **** CUSTOM FUNCTION ****
            data = fixDataInIE9(data);
        }
        if(!data) data='';
        spandata+="<div data='"+STSHtmlEncode(data)+"'></div>";
    }
    else
    {
        spandata+="<div data=''></div>";
    }
    spandata+="</div>";
    if(PreferContentEditableDiv(ctx))
    {
        if(browseris.safari)
        {
            spandata+="<span id='content' tabindex='-1' contenteditable='false'  onmousedown='onMouseDownRw(event);' onContextMenu='onContextMenuSpnRw(event,ctx);' >";
        }
        else
        {
            spandata+="<span id='content' tabindex='-1' contenteditable onmousedown='onMouseDownRw(event);' onContextMenu='onContextMenuSpnRw(event,ctx);' >";
        }
    }
    else
    {
        spandata+="<span id='content' tabindex='-1' contenteditable onmousedown='onMouseDownRw(event);' onContextMenu='onContextMenuSpnRw(event,ctx);' >";
    }
    if (browseris.ie8standard)
        spandata+="\r";
    if(displayText !='')
        spandata+=STSHtmlEncode(displayText);
    else
        spandata+=STSHtmlEncode(key);
    if (browseris.ie8standard)
        spandata+="\r</span></span>\r";
    else
        spandata+="</span></span>";
    return spandata;
}

// **** CUSTOM FUNCTION ****
function fixDataInIE9(data)
{
    if(data.indexOf('<ArrayOfDictionaryEntry>') >= 0)
    {
        data = data.replace('<ArrayOfDictionaryEntry>', '<ArrayOfDictionaryEntry xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema-instance\">');
    }
    return data;
}

Hope this helps.

More here: http://ftduarte.blogspot.se/2016/03/sharepoint-2010-caveats-for-upgrading.html