Problem rendering textarea/inputField/inputTextArea in pageBlockTable ( Internet Explorer 11 only )

Question

We've run into an html rendering issue on a Visualforce page running on Internet Explorer 11. We're nesting an inputField for a Long Text Area field in a pageBlockTable, but when the value for that field is blank, the rendered textarea is filled with all of the following html in the outputPanel being rerendered. This only seems to happen on a rerender after adding records (rows) to the table. I've tried using apex:inputField, apex:inputTextArea, and a straight textarea element, and get the same issue.

On the initial page load (renders correctly) :

After adding a record without a value in the textarea :

After adding a record with a value in the first textarea from the initial state (first image) (first row renders correctly, new line does not)

The html seen in the textarea is what should render after the textarea close tag.

Here's the Visualforce code:

<apex:outputPanel styleClass="timeEntryPanel" id="TimeEntryPanel">
<apex:pageBlockTable id="TimeEntryTable" value="{!timeEntriesByWeek}" var="t">
    <apex:column headerValue="Date">
        <c:noDateLink>
        <apex:inputField value="{!t.data.Date__c}" />
        </c:noDateLink>
        <apex:facet name="footer">
            <apex:commandButton id="newbtn" value="new entry" action="{!newEntry}" rerender="TimeEntryContainer" status="status" />
        </apex:facet>
    </apex:column>
    <apex:column headerValue="Project / Milestone + Task">
        <apex:facet name="header">
            Project<br />
            Milestone + Task<br />
            Invoice Schedule
        </apex:facet>

        <apex:selectList style="width: 200px;" rendered="{!!t.isApproved}" value="{!t.selectedProjectId}" size="1">
            <apex:selectOption itemLabel="Select a project..." itemValue="" />
            <apex:selectOptions value="{!projectOptions}" />
            <apex:actionSupport event="onchange" action="{!t.selectProject}" rerender="TimeEntryPanel" status="status" />
        </apex:selectList>
        <apex:outputField rendered="{!t.isApproved}" value="{!t.data.Project_Task__c}" /> 
        <br />

        <apex:selectList style="width: 200px;" rendered="{!!t.isApproved}" disabled="{!ISNULL(t.selectedProjectId)}" value="{!t.data.Project_Task__c}" size="1">
            <apex:selectOption itemLabel="Select a milestone / task..." itemValue="" />
            <apex:selectOptions value="{!t.taskOptions}" />
        </apex:selectList>
        <apex:outputField rendered="{!t.isApproved}" value="{!t.data.Project_Task__c}" /> 
        <br />

        <apex:selectList style="width: 200px;" rendered="{!!t.isApproved}" disabled="{!ISNULL(t.selectedProjectId)}" value="{!t.data.Invoice_Schedule__c}" size="1">
            <apex:selectOption itemLabel="Select an invoice schedule..." itemValue="" />
            <apex:selectOptions value="{!t.invoiceScheduleOptions}" />
        </apex:selectList> 
        <apex:outputField rendered="{!t.isApproved}" value="{!t.data.Invoice_Schedule__c}" /> 

    </apex:column>
    <apex:column headerValue="Hours" footerValue="Total: {!totalHours}">
        <apex:inputField rendered="{!NOT(t.isApproved)}" value="{!t.data.Hours__c}" style="width: 40px;">
             <apex:actionSupport event="onblur" rerender="TimeEntryPanel" status="status" />
        </apex:inputField>
        <apex:outputField rendered="{!t.isApproved}" value="{!t.data.Hours__c}" style="width: 40px;" />               
    </apex:column> 

    <apex:column headerValue="Submitted For">
        <apex:selectList disabled="{!ISNULL(t.selectedProjectId) || t.isApproved}" value="{!t.submittedById}" size="1">
            <apex:selectOption itemLabel="Select a resource..." itemValue="" />
            <apex:selectOptions value="{!t.memberOptions}" />
        </apex:selectList>
    </apex:column>
    <apex:column headerValue="Notes">
        <apex:inputField rendered="{!NOT(t.isApproved)}" style="height: 40px; width: 160px;" value="{!t.data.Description__c}"/>
        <apex:outputField rendered="{!t.isApproved}" value="{!t.data.Description__c}" style="height: 40px; width: 160px;"/>                    
    </apex:column>
    <apex:column headerValue="Approval Status">
        <apex:outputField value="{!t.data.Approval_Status__c}" />
    </apex:column>
    <apex:column >
        <apex:commandButton rendered="{!NOT(t.isApproved)}" value="copy" action="{!t.copy}" rerender="TimeEntryPanel" status="status" />
        <apex:commandButton rendered="{!NOT(t.isApproved)}" value="delete" action="{!t.remove}"  rerender="TimeEntryPanel" status="status" />
        <apex:facet name="footer">
            <apex:commandButton value="save" action="{!save}" />
        </apex:facet>
    </apex:column>
</apex:pageBlockTable>

Has anybody run into anything like this?

Answer 1

I was having a similar issue with IE11. I had a Visualforce form, and sections of the page were re-rendered. In IE11, some empty tags were problematic. This included tags used for clearing and <apex:inputTextarea>.

To correct the div, I inserted the html code for a space(&nbsp;). For example: <div class="clearer">&nbsp;</div>

To correct the apex:inputTextarea, I had to make sure that it was never rendered empty. In the controller, I added at least three blank spaces in the field used by the textarea when the field didn't contain text. The tag would then rerender showing one blank space. Adding only one or two spaces didn't work, not sure why. Before processing, I trimmed any left blanks.

Example apex: if (MyTextAreaField == null || MyTextAreaField.trim().length() == 0) MyTextAreaField = '   ';

Answer 2

Salesforce has logged a bug for this issue and have posted this to the Salesforce Known Issues website https://success.salesforce.com/issues_view?id=a1p30000000T3CeAAK

Answer 3

I have the same issue. And this does not happen only on visual force pages, I had this issue on the standard pages as well. EX: click on New VF Page and let the Description field empty, when you click "Quick Save" the text area field(Description) will carve out html code and adds it as a value for the textarea field. Also Error messages have some issues as you can see in the image below.

This needs to be fixed asap.

A solution for VF pages is to force the default document mode to IE 10, but if you have an inline VF page that doesn't work.

Best, Alex.

Answer 4

Good workaround,

Did you create any cases with Salesforce Support regarding this?

Thanks, Alex.