rich:datatable and expandable column with internet explorer

Question

I created a simple solution for expandable columns/rows with rich:datatable and rich:column, which is similar to: http://stackoverflow.com/questions/358840

The facelets code is (simplified) as follows:

<rich:dataTable id="detailtable"
    value="#{bean.model}"
    var="row"
    columns="2">
    <rich:column id="detail-check">
        <f:facet name="header">
            <h:selectBooleanCheckbox value="#{bean.expandAll}">
                <a4j:support event="onchange" action="#{bean.expandAllAction}"
                    reRender="detailtable" />
            </h:selectBooleanCheckbox>
        </f:facet>
        <h:selectBooleanCheckbox value="#{row.expanded}">
            <a4j:support event="onchange" reRender="detailtable" />
        </h:selectBooleanCheckbox>
    </rich:column>
    <!-- actual data column -->
    <rich:column id="detail-column"
        rendered="#{row.expanded}"
        breakBefore="true"
        colspan="2">
        <!-- detail column content -->
    </rich:column>
</rich:dataTable>

This provides a table with expanded column when you click a detail box, the details-column is rendered below the actual row. expandAllAction on backing bean just iterates over rows and sets their expanded attribute to the same as in backing bean, thus expanding/unexpanding all rows.

However this does not work correctly with Internet Explorer (IE7 or IE8), although it works with FF and Chrome. If user clicks on checkbox, nothing is rendered until he clicks on any other place on page. Backing bean and objects are being updated, but no re-rendering until some other element is clicked.

Is this something wicked again with IEs or just a bug with Richfaces? I found some similar issue with IE and tbody, but it should have been fixed. I can file a bug report but until that, is there any simple workaround?

Richfaces version is 3.3.1 and it's run on Jboss 4.2.1GA and bundled Sun RI.

Answer 1

Try use another event like onclick
From tldoc of selectBooleanCheckBox: onchange is "Javascript code executed when this element loses focus and its value has been modified since gaining focus." and onclick is "Javascript code executed when a pointer button is clicked over this element."

Yesterday was a similar question. One comment of BalusC might confirm my assumption "in case of radios/checkboxes the change event is in certain browsers only fired if you click 2 times"