Text box with error: Chrome grabs focus & doesn't let go, no problem on IE/Firefox

[ssaikuma]

Be sure your post includes:

1. SmartClient Version: v9.0p_2013-08-27/PowerEdition Deployment (built 2013-08-27)

2. Chrome Version 31.0.1650.57 m

We have a textItem that displays errors as a tooltip. On Chrome, when there is an error, the textbox grabs focus & doesn't let go. This problem doesn't happen on IE & Firefox.

public class NSTextItemNoTitleError extends TextItem
        implements
        IValidationComponent

public class NSTextBoxWithTooltipError extends HLayout
        implements
        ITestAutomationComponent,
        IValidationComponent,
        ChangedHandler 

    private NSTextItemNoTitleError mTextItem;
    private DynamicForm mContainerForm;
    private AbstractValidationWrapper mValidationFieldWrapper;
...
        mContainerForm.setFields(mTextItem);
        mValidationFieldWrapper = NSTooltipFactory
                .getValidationWrapper(mContainerForm);
        this.setMembers(mValidationFieldWrapper);
...
    public static AbstractValidationWrapper getValidationWrapper(
            final Canvas canvas) {
        canvas.setHeight100();
        canvas.setWidth100();

        final IValidationParentLayout parentLayout = new ProxyParentLayout();
        final AbstractValidationWrapper validationWrapper = new ValidationWrapper(
                parentLayout, canvas);
        return validationWrapper;
    }

    protected BlurHandler onBlurValidationHandler() {
        return new BlurHandler() {
            @Override
            public void onBlur(BlurEvent event) {
                validate();
            }
        };
    }

    public boolean validate() {
        boolean valid = mContainerForm.validate();
...
        changeErrorStyle(valid);
        return valid;
}

[Isomorphic]

Sorry, there's no way we can help with this without runnable code that reproduces the issue.

[swami]

Providing isolated code as requested

I've attached two test files using which I was able to reproduce this issue.

Create a button to launch TstErrWindow as a new window.
TstErrWindow accesses TstTooltipFactory. Change the path of the package in TstErrWindow to your test path.

Please contact me if you need any help running this code.

This window will show 3 text boxes with an Ok button.

Click on the first text. Then, click in the 2nd one. You'll find that the first box errors out & the cursor remains in the box.

This happens only in Chrome. This is fine in Firefox & IE.

[Isomorphic]

Sorry, this is not close to a minimal test case. If you submit something that is minimal and strongly suggests a framework bug, we can take a look.

[ssaikuma]

Posting fairly minimal code that reproduces the problem

I've whittled down the code to a fairly minimal test case.
I'm having issues whittling the code down even further; please do at least try out this code; I've spent a lot of time & effort bringing it down to this level. Our company has a paid support contract with you.
This code is fairly minimal, easy to test & does prove an issue with the Chrome browser.
From a button, simply call:
TstTooltipFactory.showTstErrWin()

On Chrome, click in the 1st text box. Then, click the 2nd. The focus will remain in the 1st text box.

[Isomorphic]

Thanks for the test case - this is exactly what we needed.
We're taking a look.
In the meantime a workaround you can apply is to make use of the new setAutoFocusOnError() API to disable automatic focus in the first text box when the error is displayed.

Regards
Isomorphic Software

[Isomorphic]

We've looked more deeply into the reported problem, and the code you provided.

A few pointers:

1) Its invalid to call form.validate() from the BlurHandler of one of its items - if the browser fires relevent native events, like blur(), synchronously, as Chrome does, you can end up with an infinite loop

2) Its not necessary to call form.validate() in this code anyway - in fact, its not necessary to involve BlurHandlers at all, unless there's more to your requirement than this sample shows, and you want to be doing something else, apart from simple validation.

To clarify, you've already called item.setRequired(true), so the built-in validator for checking for null or zero-length is installed - and you've then called item.setValidators() with your custom validator, so that validator's installed too.

At this point, just calling validate() on mTextItem itself is enough to run both of those validators and perform any necessary visual updates - no need to call form.validate(), which could result in focus change and further blurs - also no need to manually check whether the item has a value, as the test case does in the custom validate() method (that's what the setRequired(true) does automatically).

Instead, and to correct the code as posted, our advice would be this:

Unless you have some other need for BlurHandlers, then instead of this code:

if (enableValidatorOnBlur) {
    addBlurHandler(onBlurValidationHandler());
}

use this:

    mTextItem.setValidateOnExit(enableValidatorOnBlur);
}

And then get rid of all the BlurHandler code.

At this point, your required and regex validators will run automatically when focus exits the item (blur).

Finally, in your custom validate() method (which is no longer being called by a BlurHandler, but only on button-click), alter it so it does nothing except mTextItem.validate().

If, for some reason, you still want to do this by hooking blur on the item, you can just follow the last step - replace the contents of your onBlur() method with *only*:

mTextItem.validate()