4

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) :

On the initial page load (renders correctly)

After adding a record without a value in the textarea :

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) enter image description here

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?

  • 1
    I have discovered this issue as well. I have logged a case #10030648 if you would like to refer to it, if you do the same thing. – Daniel Blackhall Dec 20 '13 at 3:32
  • 1
    IE11 is not yet a supported browser: help.salesforce.com/… IE11 was released about the same time as SFDC Winter '14 was GA, and well after the release notes and preview release shipped. – Thomas Taylor Jan 7 '14 at 5:37
4

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 = '   ';

  • We did log a case. Support only told us that IE11 was not supported, and they did not have a date of when they expected it to be. Our SF rep, thought it may get fixed in Spring 14, and we should test it in the sandbox preview. – Dave Helgerson Jan 7 '14 at 13:56
4

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

1

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.

IE error Best, Alex.

-1

Good workaround,

Did you create any cases with Salesforce Support regarding this?

Thanks, Alex.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.