hideIcon fails in IE8-10

[Osirium1]

Version: v8.3p_2013-04-10/PowerEdition Development
OS:XP, Vista, Win7
Browser:IE8-10

In short calling hideIcon on a TextItem fails in IE with an "Unknown runtime error".

Background: I am implementing a 'clear filter' icon that clears the input of a given field on the filter editor of a listgrid. It applies only to text fields and should appear when the item gets focus and disappear when the item loses focus.

To re-create:

http://www.smartclient.com/#filter

isc.ListGrid.create({
    ID: "countryList",
    width:500, height:300, alternateRecordStyles:true,
    dataSource: worldDS,
    fields:[
        {name:"countryCode", title:"Code", width:50},
        {name:"countryName", title:"Country"},
        {name:"capital", title:"Capital"},
        {name:"continent", title:"Continent"}
    ],
    autoFetchData: true,
    showFilterEditor: true,
    getFieldFilterEditorProperties:function(field) {
      if (this.getFilterEditorType(field) != "text") {
        return
      }

      return {
        icons:[
          {
            src:"/isomorphic/skins/Simplicity/images/headerIcons/close.gif",
            showIf:"false",
            width:15,
            height:15,
            click:function(form, item) {
              item.clearValue();
              item.changed();
            // end click
            }
          }
        ],
        focus:function(form,item) {
          item.showIcon(0);
        // end focus
        },
        blur:function(form,item) {
          item.hideAllIcons();
        // end blur
        }
      }
    // end getFieldFilterEditorProperties
    }
})

In Chrome this works as expected, but in IE it yields the unknown runtime error.

I tracked down the cause to the hideIcon function on FormItem:

                    if (row.cells.length == 1) {
                        isc.Element.clear(element.parentNode);

It seems the code might be suffering from a variation of the problem outlined here:

http://www.theogray.com/blog/2009/06/internet-explorer-unknown-runtime-error

You can re-create the problem more simply by loading the example:

http://www.smartclient.com/#formIcons

Giving the form an ID:

isc.DynamicForm.create({
ID:"test",
    width: 200,
...

and pressing 'Try it'

Then on the console call:

test.getItem(0).hideAllIcons()

This will fail in IE, but work in Chrome.

Many thanks for looking at this.

[Isomorphic]

We have made a change to address this issue. Please try the next nightly build (dated April 16 or above)

Regards
Isomorphic Software

[Osirium1]

Thank you, the hiding of icons now works in IE; however it has highlighted inconsistent behaviour between IE and Chrome.

Using the sample code from before, with extra isc.Log.logWarn calls:

isc.ListGrid.create({
    ID: "countryList",
    width:500, height:300, alternateRecordStyles:true,
    dataSource: worldDS,
    fields:[
        {name:"countryCode", title:"Code", width:50},
        {name:"countryName", title:"Country"},
        {name:"capital", title:"Capital"},
        {name:"continent", title:"Continent"}
    ],
    autoFetchData: true,
    showFilterEditor: true,
    getFieldFilterEditorProperties:function(field) {
      if (this.getFilterEditorType(field) != "text") {
        return
      }

      return {
        icons:[
          {
            src:"/isomorphic/skins/Simplicity/images/headerIcons/close.gif",
            showIf:"false",
            width:15,
            height:15,
            click:function(form, item) {
              isc.Log.logWarn("click");
              item.clearValue();
              item.changed();
            // end click
            }
          }
        ],
        focus:function(form,item) {
          isc.Log.logWarn("focus");
          item.showIcon(0);
        // end focus
        },
        blur:function(form,item) {
          isc.Log.logWarn("blur");
          item.hideAllIcons();
        // end blur
        }
      }
    // end getFieldFilterEditorProperties
    }
})

In Chrome:

Click in the filterEditor TextItem and the icon appears. Type some text; then click the icon and it clears the text (however the icon stays visible). When you click outside the TextItem, the icon disappears. All this is as expected and the log calls were:

focus - click - blur

In IE:

Click in the filterEditor TextItem and the icon appears. Type some text. So far, this is the same as Chrome. However, when you click the icon, the TextItem blurs and therefore the icon is immediately hidden and the icon.click function is never called.

The log calls in this case were:

focus - blur

Thank you for your continuing support!

[Isomorphic]

While we're about to make all other events consistent, the timing of focus and blur cannot be made consistent because different browsers fire these events synchronously (most browsers) or asynchronously (IE). Use EditorEnter / EditorExit instead.

[Osirium1]

Thanks, editorEnter editorExit do work consistently!

Case closed!