[TAPESTRY-863] Form.js set_focus incompatible with ie

• Type: Bug
• Status: Resolved
• Priority: Major
• Resolution: Fixed
• Affects Version/s: 4.0
• Fix Version/s: 4.0.1
• Environment: ie
• Assignee: Jesse Kuhnert
• Reporter: Jesse Kuhnert
• Created: 10/Feb/06 07:43
• Updated: 23/Feb/06 05:37
• Resolved: 23/Feb/06 05:37

Description

I have some issues with the Tapestry.set_focus() method in the new Form
JavaScript library in Tapestry 4.0 (org.apache.tapestry.form/Form.js:86).

Tapestry.set_focus = function (field)
{
if (typeof field == "string")
field = this.find(field);

if (field.focus)
field.focus();

if (field.select)
field.select();
}

This same Focus JavaScript existed in the previous release, but was only
called along with instances of the ValidField component. Now that any
field in 4.0 can be validated, it's called in practically every instance
of a Form. With this new widespread use I am proposing a more robust
implementation of the JavaScript to fix some issues I've seen.

Here are the issues:

1. When calling set_focus() on a Submit button, the button text is
selected after focusing.

This is an IE only issue. The select() method is specified in
W3C's standards to
only select the text of editable inputs like <input
type="text"/> and <textarea/>.
IE is ignoring this part of the standard (big surprise).

2. When calling set_focus() on a disabled form input, JavaScript error
alerts ensue.

I saw this was fixed in a recent update. However, the fix was
made in the Java and
not the JavaScript. This is nice, but when making JavaScript
fixes I tend to go overkill
and fix on the Server side and the Client side in case something
gets out of sync.

3. When calling set_focus on a hidden (as in CSS) form input, JavaScript
error alerts ensue.

Firefox ignores this problem quite well – this is yet another IE
issue that is very annoying.
It took me a long time to find a JavaScript fix for this.

Here is my proposed new JavaScript:

Tapestry.set_focus = function (field)
{
if (typeof field == "string")
{
field = this.find(field);

/* Make sure the field was found to avoid null pointer. */
if (field)
{

/* Check for disabled and hidden fields. */
if (!field.disabled && field.clientWidth > 0)

{ if (field.focus) field.focus(); /* Check the IE-only contentEditable property to know which objects to select text on. */ if (field.isContentEditable || field.isContentEditable == null) if (field.select) field.select(); }

}
}
}

I've attached an HTML file, the original Form.js, and my new FormNew.js
that can be used to re-produce the issues and test the fixes.

Thanks!