How to fix: rendered="false" on a selectoption causes further selectoptions within the repeat to not render

Question

<apex:repeat value="{!myList}" var="item" id="myRepeater">
    ...
    <apex:selectList required="" value="{!item.newValue}" id="mySelectlist" multiselect="false" size="1" style="border:none;-webkit-appearance:none;-moz-appearance:none;appearance: none;padding-right: 30px;color:rgb(31, 73, 125);">
        <apex:selectOption itemValue=" " itemLabel=" " rendered="{!item.renderWhenBlank}"/>
        <apex:selectOptions value="{!myGlobalSelectOptions}" />
    </apex:selectList>
    ...
</repeat

Scenario:

• 10 items in myList.
• each item (Class) has a boolean called renderWhenBlank. This is used to render a blank Option/Value at the top of the
• only 1 item in the middle of the list (myList[5]) has a false in this boolean.

Issue:

• When the 10 render the top 5 SelectLists have a rendered SelectOption at the top of " " (CORRECT);
• and the 6th does not have the top SelectOption (CORRECT);
• but the remaining selectLists 7-10 do not have a top SelectOption. The moment there is a rendered = "False" the next items in the list also incorrectly rendered="false" This is what we want fixed

Secondary Question: Or is this a Salesforce bug!

possible work arounds: javascript updating the style of our blank extra selectOption. Or creating a new variable in our class of type List and not using a global variable (and removing the solo selectOption).

Answer 1

The following works just fine:

Page

<apex:page controller="myExample">


    <apex:form >

    <apex:selectList required="" value="{!selectedValue}" id="mySelectlist" multiselect="false" size="1" >
        <apex:selectOption itemValue=" " itemLabel=" " rendered="true"/>
        <apex:selectOptions value="{!theOptions}" />
    </apex:selectList>

    </apex:form>

</apex:page>

Controller

public class myExample{

    public string selectedValue {get;set;}

    public SelectOption[] theOptions{
        get{
        return New SelectOption[]{
            New SelectOption('a','a'),
            New selectOption('b','b')
        };
        }
    }


}

Start with the above, get it working then add your other code around it to see what breaks it.

Alternately you can use a repeat to populate the <apex:selectOption> for each one you want instead of using the <apex:selectOptions>

Rendered = true

Rendered = false

Note You can also simply add a blank selectOption to the list of selectOptions in the Apex class instead of doing it in the markup if your flow allows it

Answer 2

I think the answer, as per SFDCFOX's comment above, it is a Salesforce Bug.

Our ultimate work around: We chose to use a new variable in our class "List myOptions" which rendered separately for each iteration of the repeat.

I only worry that this increases our viewstate???

Our alternate solution which caused us css issues: We created 2 option lists and rendered the desired one based on our boolean item.renderWhenBlank.