I created a portlet with an ACE dataTable. In the columns I have enabled filtering and sorting. For some of the filtering I use the filterOptions to provide a constrained list of filter values.

e.g.

<ace:column id="rowingTeamLeague"
                     headerText="#{i18n['league']}"
filterBy="#{rowingTeam.leagueId}"
filterMatchMode="exact"
filterOptions="#{aceRowingTeamModelBean.leagueFilterOptions}">

The backing bean has a list of SelectItems
e.g.

this.leagueFilterOptions.add(new SelectItem(league.getLeagueId(), league.getName()));
 

The filtering works perfectly fine in Chrome and Firefox, but when I use IE9, I can only select a filter option once and then the app is broken. I can't click anywhere in the app, neither other filter options nor available buttons.

I turned on the IE JS Debugger and found the problem was in :

ICEfaces-3.2.0-src\icefaces\ace\component\resources\icefaces.ace\core\core.js.

It turns out that the filter function in datatable.js

ice.ace.DataTable.prototype.filter = function (evn) { ...

calls :

        newInput.setCaretToEnd();

when it gets a successful resource request response from the server. The setCaretToEnd is handled in core.js. However, it fails to work in IE9. In the JS code specifically written for IE the JS attempts to call createTextRange() on an HTMLSelectElement object. The debugger says that the method createTextRange() is not supported. On the HTMLSelectElement I can only see createControlRange(). However, by removing the lines that create and manipulate in the text range, the dataTabe filterOptions work again and the chosen filter is correclty highlighted in IE9, Firefox and Chrome.