Cannot clear name from PeoplePicker on Firefox 43.04, 44

Question

Working with a PeoplePicker (PeopleEditor) in SharePoint 2010, I can assign a value through the address book, and manually typing. Submitting the page to update the record this control is tied to works as expected.

When trying to clear the value by simply deleting the text (highlight the entire text value and delete or backspace) and submitting the page, the previous value always returns. Also, if you clear the value, and click the check names button, the value will return this way as well. Clicking the name and pressing backspace or delete works as expected.

This is not a problem in IE 11, Chrome 47, or Firefox 41/38.

The PeoplePicker is dynamically created on page load as shown below:

PeopleEditor pe = new PeopleEditor();
pe.ID = dynControlID;
pe.CssClass = "pickerControl";
pe.SelectionSet = "User";
pe.MultiSelect = false;
pe.PlaceButtonsUnderEntityEditor = false;
pe.ShowEntityDisplayTextInTextBox = true;
div.Controls.Add(pe);

The control is populated OnPreRender the following:

PeopleEditor pe = ((PeopleEditor)FormPlaceHolder.FindControl(item + dynamicControlSuffix));
try{
   value = new ADObjectHelper().AttributeValuesSingleString(ADProperties.DISPLAYNAME, (String)value);
}
catch { }

pe.CommaSeparatedAccounts = (String)value;
pe.Validate();

Is there a workaround that can be implemented?

Answer 1

Why because when the people picker comes into HTML page its like combination of DIV and SPAN's so you need to clear those DIV data and SPAN which will going to generate by SharePoint dynamically so that Using JavaScript using achieve this, call this below function on some button click event:

function ClearData() {
    var manager = '<%= plpckProjectManager.ClientID%>';//People Picker ID
     resetpeoplepicker(manager);//Function calling
}
    function resetpeoplepicker(id) {

            var value = '';
            var tags = document.getElementsByTagName('DIV');

            for (var i = 0; i < tags.length; i++) {
                var tempString = tags[i].id;
                if ((tempString.startsWith(id)) && (tempString.indexOf('_upLevelDiv') > 0)) {
                    tags[i].innerHTML = value;
                    break;
                }
            }
        }

Answer 2

Using @Jayakumar Kulkarni 's answer as a jumping off point, I came to the following as a complete answer considering I'm creating controls dynamically. The code below will add an event listener to check when the value has been deleted from the picker. I've also pulled the element needed without iterating through all divs. Last, the element's innHTML has to be left with a non-breaking space to prevent the input area from collapsing.

_spBodyOnLoadFunctionNames.push("load");

function load() {
    var ele = document.getElementsByClassName("ms-inputuserfield");
    for (var i = 0; i < ele.length; i++){
        if(ele[i].id.indexOf("_upLevelDiv") > 0)
            document.getElementById(ele[i].id).addEventListener("blur", ClearData);
    }

}

function ClearData(evt) {

    var ele = document.getElementById(evt.target.id);
    var span = ele.getElementsByTagName("span")[1];

    if (span != undefined && span.innerHTML.trim() === "") {
        ele.innerHTML = "&nbsp;";
    }
}

Without overriding the javascript function which handles the hidden span creation/population containing the resolved entity data, the next best workaround is to simply click the name of the entity and hit backspace or delete.

Highlighting the entire value and hitting backspace or delete does not fire the underlying JS as expected, leaving hidden data, used by the check names function.