Announcement

**Isomorphic** · 7 Sep 2011, 15:28

We've made a change to
- resolve the 5.0.5 issues (the previous fix was targetted at 5.1 and greater)
- have native focus indicator (glow) show up for Canvas-level focus in Safari/Chrome

This takes care of 1-3. We are not reproducing #4. It's possible that the changes we made resolved this however if you continue to see it let us know and we'll take a look

Thanks
Isomorphic Software

(Note fixes will show up in the next nightly build - September 8 or greater)

**ESherbakova** · 8 Sep 2011, 05:41

Thank you for quick response!

**ESherbakova** · 12 Sep 2011, 12:57

We are facing one more issue with tabbing.
We have a custom CanvasItem and elements (fields, buttons) inside the item completely excluded from tabbing.

If the canvas is simple (an element like button, image or DynamicForm), it's working fine, but if it's a bit more complicated and has Layouts - it's excluded.

In the provided sample if the "CwCustomItem" has only DynamicForm as "canvas", the text field inside receives focus, but if a DynamicForm is placed in VLayout - it's not working.

Sometimes we observe that elements are actually get focus but only after all other fields on the page. Or vice versa, they can be first focusable fields on the page.

How we can handle the tabbing in this case? Are there any recommendations?

Code:

<HTML><HEAD>
	<SCRIPT>var isomorphicDir="../../isomorphic/";</SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/skins/Enterprise/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR='papayawhip' MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>


<!--------------------------
  Example code starts here
---------------------------->

<SCRIPT>

isc.ClassFactory.defineClass("CwCustomItem", "CanvasItem");

isc.CwCustomItem.addProperties({
    init:function () {
        this.canvas = 
		isc.VLayout.create({
		members: [
		isc.DynamicForm.create({
	        	numCols: 1,
	        	width: 200,
	        	colWidths: [200,200],
	        	fields : [
	        	          {name:"textFld", title:"Text field inside", type:"text"}
	        	]
	    })
		],
		getTabIndexSpan: function() { return 5; }});
        return this.Super("init", arguments);
    }
});

isc.VLayout.create({
    members: [

isc.HLayout.create({
    //height: 1000,
    //width: 500,
	overflow: "visible",
    members: [

	isc.DynamicForm.create({
		fields: [
			{name:"textFld", title:"Text", type:"text"},
			{name:"pickListDate", title:"PickList Date", type:"date"},
			{name:"directInputDate", title:"Direct Input Date", type:"date", useTextField:true},
			{name:"chBox", title:"In Stock", type:"checkbox"},
			{name: "willAttend",
			 type: "radioGroup",
			 colSpan: "*",
			 required: true,
			 vertical: false,
			 valueMap: ["Yes", "No"],
			 redrawOnChange:true,
			 title: "Simple"
			},
			{name:"textFld2", title:"Text 2", type:"text"},
			{name:"canvasField", title:"Canvas item", _constructor: "CwCustomItem"},

			{name: "shipTo", title: "Ship to", type: "select",
			 valueMap: {
				"US" : "<b>United States</b>",
				"CH" : "China",
				"JA" : "<b>Japan</b>",
				"IN" : "India",
				"GM" : "Germany",
				"FR" : "France",
				"IT" : "Italy",
				"RS" : "Russia",
				"BR" : "<b>Brazil</b>",
				"CA" : "Canada",
				"MX" : "Mexico",
				"SP" : "Spain"
			 }
			},
			{name: "rg2",
			 type: "radioGroup",
			 colSpan: "*",
			 required: true,
			 vertical: true,
			 valueMap:{"N":"I want the next available date","S":"I want a specific date"},
			 redrawOnChange:true,
			 title: "Radiogroup",
			 titleOrientation:"right",
			 isBoolean:"false",
			 wrap:false,
			 defaultValue:true
			},
			{name:"textFld2", title:"Text 3", type:"text"},
		]
	})
]})
]});

</SCRIPT>
</BODY>
</HTML>

**Isomorphic** · 13 Sep 2011, 18:04

A quick note to let you know we're looking at this and expect to have a resolution on the framework side in the next day or two.

**acarur01** · 14 Sep 2011, 07:48

This one is more of an inquiry. In FF, set focus on username, then press tab. Focus goes on the email field. You'll see that the cursor goes to the end of the default value. Now remove the length property. Do the exact same testcase and notice that instead of just moving the cursor to the end of the value, the whole default value is selected. Any reason for this difference in behaviour?

Code:

isc.DynamicForm.create({
    ID: "exampleForm",
    width: 250,
    fields: [
        {name: "username",
         title: "Username",
         type: "text",
         required: true,
         defaultValue: "bob"
        },
        {name: "email",
         title: "Email",length:260,
         required: true,
         type: "text",
         defaultValue: "bob@isomorphic.com"
        }, {name: "message",
         type: "text",
         showTitle: false,
         colSpan: 2,
         width: "*",defaultValue: "TESTING"
        }
    ]
});

**Isomorphic** · 14 Sep 2011, 08:36

Not by design, probably just a side effect of checking that the value hasn't exceeded the length, and may not be consistent across versions of Firefox.

**acarur01** · 14 Sep 2011, 08:47

Ok. It is also happening in IE8

**Isomorphic** · 14 Sep 2011, 11:03

The issue whereby CanvasItem descendent widgets are not correctly slotted into the page's tab order should now be resolved - please give it a try with the next nightly build (Sep 15 or greater) and let us know if you continue to encounter this issue.

**ESherbakova** · 16 Sep 2011, 08:26

Thank you for fixing staff.
Sorry to be a pain, but we found one more issue with tabbing.

Filter fields in the table are excluded from normal tab order.
Run the sample in Feature explorer. First it tabs fields of the first form, then table body, then fields of the second form and only then filter fields get focused.

Expected order: first form fields, filter fields, filter button, table body, second form fields.

Code:

isc.VLayout.create({
    overflow: "visible",
    members: [

    isc.DynamicForm.create({
        fields: [
            {name:"textFld", title:"Text", type:"text"},
            {name:"pickListDate", title:"PickList Date", type:"date"},
        ]
    }),

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,
    filterOnKeypress: true
}),

isc.DynamicForm.create({
        fields: [
            {name:"textFld", title:"Text", type:"text"},
            {name:"pickListDate", title:"PickList Date", type:"date"},
        ]
    })

]});

**ESherbakova** · 21 Sep 2011, 09:20

Any update on the filter fields issue?

-------
We need help to pinpoint the problem with tab order of tables and trees on our pages.

Very often we see that table or tree breaks the tab order. There are usually 2 scenarios:

1) Page elements above the table/tree get correct tab order, then focus goes to the table body, but after that rest of the page are ignored and focus goes directly to the browser address bar.
If set focus to an element below the table, tab order the rest of the page are fine, but once it makes a circle and reaches the table again, focus, again, goes to the address bar.
If using Shift+TAB it may actually go backward to the rest of the page. Seems like table splits the page into 2 isolated tab zones.
(ex sceenshot 1)

2) Another example (sceenshot 2): in a popup dialog there is a table with filter fields and "Apply" button.
First of all, filter fields are completely ignored with tabbing, only table body, Apply button and then "filter" button.

In IE & Firefox if table body gets focus pressing TAB does nothing - the focus gets stuck at the table body. (the table does not have keypress handler overridden or anything like that).
Although Shift+TAB in IE works better and focus goes through table - Apply button - table filter button.

Usually if we exclude the table or tree from the tab order (set tabIndex to -1), tab order is fine after that; but this is not an option for us, the element should be accessible with tabbing.

Unfortunately, I was unable to reproduce those issues as simple standalone example.
This is probably some kind of timing issue due to the specific way we build the page. We assemble the page dynamically, so the table and the rest pieces of the page can be created, added to parent layout placeholder, initialized (I mean creating and initializing widgets' auto children) and drawn in almost unpredictable order.
Ex, in the case of the dialog, the dialog window gets created first and the "content" of the dialog is getting created and inserted after.
I cannot simply replicate the page with the exact sequence of creating page parts, elements, this is just impossible.

We suspect that this issue happens when new elements are being inserted on the page, but when it is supposed to recalculate and shift tab indexes forward, apparently some of the table elements or parent layouts do not update tab indexes properly (or maybe they are not properly initialized yet at the moment), so the tab order of HTML elements becomes inconsistent.

A while ago we found a workaround for some cases of broken tab order:
http://forums.smartclient.com/showpost.php?p=63764&postcount=9
and this workaround works fine for all pages that do not have tables or trees.

So questions are:
- How we can possibly find the source of the problem? This broken order is not something random, but always reproducible.
Usually I try to debug your JS files in browser and analyze rendered HTML to understand what's going on, this helps me create a standalone example,
but this time I do not know where to start from.

- Maybe we can force widget/auto children initialization, so when a new canvas with a table/tree is being inserted to the page, it's already properly created and initialized, so the tab indexes will be shifted properly?

Can you suggest any workaround we can try out?
We can try to override some methods (ex, getTabIndexSpan or setIndex, etc.)/set properties or even handle TAB keypress to compensate the tab order.
But this should be something universal for all table elements we render; we cannot "hack" tables by manually moving focus on TAB to the next logical element by hard-coded ID; we need a common way to find next tab order element.

Attached Files

**Isomorphic** · 21 Sep 2011, 11:41

We applied a fix for the filter-fields issue last night so should be present in the latest nightly builds.

This may also have an impact on the other issues you're seeing.

In terms of debugging / or workarounds to apply - the TabIndex subsystem is a somewhat complex beast (and something we intend to overhaul for the next major release).
Attempting to come up with workarounds such as overriding the various tab-index related methods is probably not going to be very productive.

For simple applications you can explicitly specify tabIndex per component / form item but this will probably not be of any help for a complex app with nested components.
If you don't do this the system allocates TabIndices automatically, attempting to recursively allocate tab indices that increase in the order in which components appear on the page (so layout members will show up in order, and if nesting occurs, tabbing should correctly go through the inner layout's members before continuing with the top level layout members, etc). This is a complex system that relies on the methods you mention, and obviously isn't handling some cases correctly for you.

The best way to proceed would be to focus your efforts on coming up with reproducible cases that show specific errors you're encountering so we can take a look. The suggested approach for this is the same as for any issue - either duplicate your basic UI in a simple test case and add functionality to mimic your live app more closely until you get a reproducible case, or simplify your application code down and see if you can find where the issue disappears.

**ESherbakova** · 3 Oct 2011, 10:09

Hi, we have a specific issue on the 2011-09-22 build.

In a popup dialog there is a text field, a table with filter fields and an "Apply" button.

1) The tabbing stops at the text field and can not move any more. If we just display the same example not in a pop up window, everything works well.

2) The table body and the "Apply" button can not be accessed through tabbing, but only through the reverse tabbing (Shift-Tab).

Please see the standalone test case below. Thanks!

Code:


<HTML><HEAD><TITLE>Tabbing Problem in a Popup Window</TITLE>
    <SCRIPT>var isomorphicDir = "isomorphic/"</SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
	<SCRIPT SRC=isomorphic/skins/Enterprise/load_skin.js></SCRIPT>
</HEAD><BODY CLASS="pageBackground">


<SCRIPT>
isc.ClassFactory.defineClass("CwButtonItem", "CanvasItem");

isc.CwButtonItem.addProperties({
    init:function () {
        var canvasProperties = {
                shouldSaveValue: false,
                cwUploadControl: this.cwUploadControl,
                $isCwButton: this.$isCwButton,
                icon: this.icon,
                iconOrientation: this.iconOrientation,
                hoverStyle: this.hoverStyle,
                hoverWidth: this.hoverWidth,
                //baseStyle: this.buttonStyle,
                ID: this.widgetID,
                width: this.width,
                height: this.height,
                action: this.cwClick,
                showRollOver: this.showRollOver,
                showDown: false,
                iconWidth: this.iconWidth,
                iconHeight: this.iconHeight,
                iconSpacing: this.iconSpacing,
                name: this.name,
                autoFit: this.autoFit,
                title: this.buttonLabel,
                align: this.textAlign,
                auditor: this.auditor,
                $cwname: this.$cwname,
                autoFit: this.autoFit,
                iconWidth: this.iconWidth,
                iconHeight: this.iconHeight, 
                keyPress: this.keyPress
            };
        
        if (this.buttonStyle != null) {
            canvasProperties.baseStyle = this.buttonStyle;
            if (this.cwAutoFit)
                canvasProperties.overflow = "visible";
        }
        
        if (this.cwStretchButton) {
            canvasProperties.autoFit = this.cwAutoFit;
            canvasProperties.showRollOver = true;
            canvasProperties.src = this.cwImageSrc;
            if (this.cwCapSize)
              canvasProperties.capSize = this.cwCapSize;
            if (canvasProperties.autoFit) {
                canvasProperties.overflow = "visible";
            }
            canvasProperties.titleSuffix = "";
            if (canvasProperties.autoFit && this.cwLabelLengthPad)
              canvasProperties.labelLengthPad = this.cwLabelLengthPad;
            this.canvas = isc.StretchImgButton.create(canvasProperties);
        }
        else
            this.canvas = isc.Button.create(canvasProperties);
        
        //this.showTitle = false;
        this.title = "";              //this is needed for the canvasItem otherwise a title will appear on top of the button or beside it
        return this.Super("init", arguments);
    },
    setCwDynStyle:function(style) {
        this.buttonStyle = style;
        if (this.canvas != null) {
            this.canvas.setProperty("baseStyle", style);
            this.canvas.markForRedraw();
            if (this.canvas.autoFit && this.form)
                this.form.markForRedraw();
        }
    },
    setCwDynIcon:function(icon) {
        if (this.canvas != null) {
            this.canvas.setProperty("icon", style);
            this.canvas.markForRedraw();
            if (this.canvas.autoFit && this.form)
                this.form.markForRedraw();
        }
    },
    setCwDynImage:function(image) {
        if (this.canvas != null) {
            this.canvas.setProperty("src", image);
            this.canvas.markForRedraw();
        }
    }    
});

//START
isc.IButton.create({
    title: "Show Window",
    top: 100,
    left: 75,
    click : function () {
        modalWindow.show();
    }
});

isc.Window.create({
    ID: "modalWindow",
    title: "Modal Window",
    autoCenter: true,
    autoSize:true,
    isModal: true,
    showModalMask: true,
    autoDraw: false,
    items: 
	[isc.SectionStack.create({ID:"topStack_COF",canFocus:false,visibilityMode:"mutex",overflow:"visible",width:600,height:400,sections:
    [{ID:"topSection_COF",visible:true,hidden:false,items:
        [ isc.DynamicForm.create({ID:"DF1", fields: [{title:"Text Field", type: "text"}]}),
		isc.VStack.create({members:
            [isc.DynamicForm.create({fixedColWidths:true,ID:"GridLayout_COF",name:"GridLayout",title:"&nbsp;",numCols:6,titleSuffix:"&nbsp;",
             rightTitlePrefix:"&nbsp;",requiredTitleSuffix:"*<\/B>",requiredRightTitleSuffix:"*<\/B>",requiredRightTitlePrefix:"<B> ",
             titleOrientation:"top",cellPadding:2,fields:
                [{title:"<nobr>Select&nbsp;<\/nobr>",tabIndex:-1,showTitle:false,width:60,errorIconWidth:16,errorIconHeight:16,ID:"Label_COF",name:"Label",
                 keyDown:"",defaultValue:"Select",wrap:false,_constructor:"StaticTextItem"},
                {title:"<nobr>First Name&nbsp;<\/nobr>",tabIndex:-1,showTitle:false,width:100,errorIconWidth:16,errorIconHeight:16,ID:"Label1_COF",
                 name:"Label1",keyDown:"",defaultValue:"First Name",wrap:false,_constructor:"StaticTextItem"},
                {title:"<nobr>Last Name&nbsp;<\/nobr>",tabIndex:-1,showTitle:false,width:100,errorIconWidth:16,errorIconHeight:16,ID:"Label2_COF",name:"Label2",
                 keyDown:"",defaultValue:"Last Name",wrap:false,_constructor:"StaticTextItem"},
                {title:"<nobr>E-mail&nbsp;<\/nobr>",tabIndex:-1,showTitle:false,width:150,errorIconWidth:16,errorIconHeight:16,ID:"Label3_COF",name:"Label3",
                 keyDown:"",defaultValue:"E-mail",wrap:false,_constructor:"StaticTextItem"},
                {title:"<nobr>Telephone&nbsp;<\/nobr>",tabIndex:-1,showTitle:false,width:80,errorIconWidth:16,errorIconHeight:16,ID:"Label4_COF",name:"Label4",
                 keyDown:"",defaultValue:"Telephone",wrap:false,_constructor:"StaticTextItem"},
                {title:"<nobr>Ext&nbsp;<\/nobr>",tabIndex:-1,showTitle:false,width:50,errorIconWidth:16,errorIconHeight:16,ID:"Label5_COF",name:"Label5",
                 keyDown:"",defaultValue:"Ext",wrap:true,_constructor:"StaticTextItem"}
                ]}),
            isc.SectionStack.create({ID:"resStack_COF",canFocus:false,visibilityMode:"mutex",overflow:"visible",defaultWidth:1,height:"100%",sections:
                [{ID:"resSection_COF",items:
                    [isc.VStack.create({members:
                        [isc.VStack.create({members:
							[isc.VStack.create({ID:"table_COFR",name:"table",title:"&nbsp;",showResizeBar:false,height:"100%",width:"100%",members:
								[(isc.DataSource.create({ID:"contactOnlyFinderResultTable$ds_COFR",fields:
									[{name:"cwPK__",primaryKey:true},
									{name:"firstName"},
									{name:"lastName"},
									{name:"email"},
									{name:"telephoneNumber"},
									{name:"extn"}
									],
								 showPrompt:false,criteriaPolicy:"dropOnChange",
								 compareCriteria:function() { return 1; }}),
								isc.ListGrid.create({styleName:"stripesFinderResult",title:"&nbsp;",baseStyle:"stripesFinderResult",bodyStyleName:"stripesFinderResult",
								 fastCellUpdates:false,groupStartOpen:"all",wrapCells:true,fixedRecordHeights:false,dataSource:"contactOnlyFinderResultTable$ds_COFR",
								 dataProperties:{useClientFiltering:false,neverDropUpdatedRows:true},ID:"contactOnlyFinderResultTable_COFR",showHeader:false,hoverStyle:"CwHoverStyle",
								 modalEditing:true,recordBaseStyleProperty:"velocityRowStyle",canSelectText:true,selectOnEdit:true,willHandleErrors:true,autoFetchData:false,canSort:true,
								 headerButtonProperties:{wrap:true},width:"100%",height:"220px",loadingDataMessage:"",fields:
									[{type:"image",canSort:false,showTitle:false,imageURLPrefix:"\/",name:"changePic",align:"left",canEdit:false,filterEditorType:"SpacerItem",
									 validateOnChange:true,width:"40"},
									{title:"<nobr>firstName&nbsp;<\/nobr>",editorType:"text",editorProperties:{},filterEditorProperties:{_constructor:"TextItem",required:false,
									 validateOnChange:false,type:"text",changed:function() { return true; },focus:function() { return true; }},name:"firstName",align:"left",
									 width:"120"},
									{title:"<nobr>lastName&nbsp;<\/nobr>",editorType:"text",editorProperties:{},filterEditorProperties:{_constructor:"TextItem",required:false,
									 type:"text",changed:function() { return true; },focus:function() { return true; }},name:"lastName",align:"left",
									 validateOnChange:true,width:"120"},
									{title:"<nobr>email&nbsp;<\/nobr>",editorType:"text",editorProperties:{},filterEditorProperties:{_constructor:"TextItem",required:false,
									 type:"text",changed:function() { return true; },focus:function() { return true; }},name:"email",align:"left",
									 validateOnChange:true,width:"100%"},
									{title:"<nobr>Telephone Number&nbsp;<\/nobr>",displayFormat:"[\\d]{3}-[\\d]{3}-[\\d]{4}",editorProperties:{_constructor:"TextItem"},
									 filterEditorProperties:{_constructor:"TextItem",required:false,type:"text",changed:function() { return true; },
									 focus:function() { return true; }},name:"telephoneNumber",align:"left",validateOnChange:true,width:"100"},
									{title:"<nobr>Extn&nbsp;<\/nobr>",displayFormat:"[\\d]{6}",editorProperties:{_constructor:"TextItem"},
									 filterEditorProperties:{_constructor:"TextItem",required:false,type:"text",changed:function() { return true; },
									 focus:function() { return true; }},name:"extn",align:"left",validateOnChange:true,width:"50"}
									],showFilterEditor:true}))
								]})
							],
						 showResizeBar:false,ID:"resultFrame_COF",title:"&nbsp;",vPolicy:"fill",hPolicy:"fill",height:"100%"})
						],
					 ID:"resSectionresultFrame_COF",overflow:"visible"})
                    ],canCollapse:false,showHeader:false,expanded:true}
                ]}),
            isc.DynamicForm.create({ID:"ButtonWrap_COF",width:60,height:"*",titleSuffix:"&nbsp;",titlePrefix:"",autoFocus:false,titleOrientation:"top",
             numCols:1,rightTitlePrefix:"",requiredTitleSuffix:"*<\/B>",requiredRightTitleSuffix:"*<\/B>",requiredRightTitlePrefix:"<B>",fields:
                [{title:"<b>Apply<\/b>&nbsp;",showTitle:false,widgetID:"Button_COF",redrawOnStateChange:true,auditor:"",
                 keyPress:function(){ if (isc.EventHandler.getKey() == "Enter") return false; else return true; },width:60,startRow:false,height:20,
                 buttonStyle:"button",shouldSaveValue:false,name:"Button",buttonLabel:"&nbsp;<b>Apply<\/b>&nbsp;",textAlign:"center",iconSpacing:6,
                 iconWidth:16,iconHeight:16,_constructor:"CwButtonItem"}
                ],cellPadding:2})
            ],
         ID:"topSectionfinderHeader_COF",overflow:"visible"})
        ],
     canCollapse:false,title:"Finder&nbsp;",expanded:true,showHeader:true}
    ]})
	]
});
</SCRIPT></BODY></HTML>

**Isomorphic** · 6 Oct 2011, 10:35

Just to let you know we're reproducing the problem and are working on it. This may be a slightly tricky one - regardless we'll let you know as soon as we have it resolved.

**Isomorphic** · 6 Oct 2011, 16:16

Ok - this should now be resolved in the 8.1.x branch. Please give it a try with the next nightly and let us know if you continue to have issues.

Regards
Isomorphic Software

**acarur01** · 16 Oct 2011, 15:28

Just re-tested the standalone testcase provided - it works in IE and Chrome but not in Firefox (I'm testing with FF6).

Also, the actual scenario in our environment does not work at all. Once the focus goes on the listgrid, it is there for a quick second then disappears and the next time I press tab, the focus is on the section stack.

Announcement

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment