a4j:support reRender loses focus in IE

[ncheck]

Hi There,

I'm having a problem with a4j:support tag on an input box - where I have an a4j:support tag.  as I'm tabbing through the HTML/rendered page, and tab through the field with the a4j:support, after a few seconds' delay in IE ONLY, the form loses focus altogether.  I've tried manually refocusing back to the activeElement with an oncomplete='document.activeElement.focus();' but it just doesn't work in IE.  despite the error shown below, my oncomplete is still called (opens an alert box) - can someone please tell me a workaround for this issue?  Thanks!

Here's the a4J LOG:

debug[10:25:28,281]: Update page part from call parameter for ID mainForm:j_id212

debug[10:25:28,281]: call selectSingleNode for id= mainForm:j_id212

debug[10:25:28,281]: Replace content of node by outerHTML()

debug[10:25:28,281]: search for elements by name 'script' in element span

debug[10:25:28,281]: Scripts in updated part count : 0

debug[10:25:28,281]: Update part of page for Id: mainForm:j_id212 successful

debug[10:25:28,281]: Update page part from call parameter for ID mainForm:j_id228

debug[10:25:28,281]: call selectSingleNode for id= mainForm:j_id228

debug[10:25:28,281]: Replace content of node by outerHTML()

debug[10:25:28,281]: search for elements by name 'script' in element span

debug[10:25:28,281]: Scripts in updated part count : 0

debug[10:25:28,281]: Update part of page for Id: mainForm:j_id228 successful

debug[10:25:28,281]: Update page part from call parameter for ID mainForm:j_id235

debug[10:25:28,281]: call selectSingleNode for id= mainForm:j_id235

debug[10:25:28,281]: Replace content of node by outerHTML()

debug[10:25:28,296]: search for elements by name 'script' in element span

debug[10:25:28,296]: Scripts in updated part count : 0

debug[10:25:28,296]: Update part of page for Id: mainForm:j_id235 successful

debug[10:25:28,296]: Update page part from call parameter for ID mainForm:j_id242

debug[10:25:28,296]: call selectSingleNode for id= mainForm:j_id242

debug[10:25:28,296]: Replace content of node by outerHTML()

debug[10:25:28,296]: search for elements by name 'script' in element span

debug[10:25:28,296]: Scripts in updated part count : 0

debug[10:25:28,296]: Update part of page for Id: mainForm:j_id242 successful

debug[10:25:28,296]: Update page part from call parameter for ID mainForm:j_id249

debug[10:25:28,296]: call selectSingleNode for id= mainForm:j_id249

debug[10:25:28,296]: Replace content of node by outerHTML()

debug[10:25:28,296]: search for elements by name 'script' in element span

debug[10:25:28,296]: Scripts in updated part count : 0

debug[10:25:28,296]: call selectSingleNode for id= org.ajax4jsf.oncomplete

debug[10:25:28,296]: Call request oncomplete function after processing updates

debug[10:25:28,296]: After request: queue 'mainForm:j_id173'

debug[10:25:28,296]: There are 0 requests more in this queue

debug[10:25:28,296]: Queue is empty now

debug[10:25:28,296]: Update part of page for Id: mainForm:j_id249 successful

debug[10:25:28,296]: call selectSingleNode for id= ajax-view-state

debug[10:25:28,296]: Hidden JSF state fields:

debug[10:25:28,296]: Namespace for hidden view-state input fields is undefined

debug[10:25:28,296]: search for elements by name 'input' in element span

debug[10:25:28,296]: Replace value for inputs: 29 by new values: 1

debug[10:25:28,296]: Input in response: javax.faces.ViewState

debug[10:25:28,296]: Found same input on page with type: hidden

debug[10:25:28,296]: Found same input on page with type: hidden

debug[10:25:28,312]: Found same input on page with type: hidden

debug[10:25:28,312]: Found same input on page with type: hidden

debug[10:25:28,312]: search for elements by name 'INPUT' in element span

debug[10:25:28,312]: Replace value for inputs: 29 by new values: 0

debug[10:25:28,312]: call selectSingleNode for id= _A4J.AJAX.focus

debug[10:25:28,312]: No focus information in response

debug[10:25:28,359]: call selectSingleNode for id= _ajax:data

error[10:25:28,359]: Error evaluate oncomplete function undefined

[ncheck]

Note that the input box is reRendering itself - I believe this is the cause of the issue of losing focus in IE.  I need to reRender the field itself because if there are any errors, I highlight the field with a different style to reflect the error.

[ilya_shaikovsky]

try to use focus attribute.

P.S. moving the thread to RichFaces space. This space is deprecated.

[ilya_shaikovsky]

ah.. have no permissions for that space as it's closed So please post any further questions to RichFaces users and not there.

[ncheck]

The problem with focus is that it isn't quite dynamic enough - I can set the focus to the current field, however, that would result in the user sticking on the current field - since when they tab off the field (a4j:support is handling onblur event) and then the field is reRendered and set focus, they can never get off that field.

I would like to know - is there any alternative or way I can use focus to get the currently active or focused element?  I believe I cannot pass javascript to the focus attribute.

One other thing I tried is in the oncomplete i tried a "manual" version of reRender - something like the following (in javascript of course) - but for some reason it isn't properly invoking my ComponentInterceptors and therefore I can never inject the error condition so that the style can be reflected on the input field - any ideas would be appreciated!

                              function doRerender(element) {

                                        try {

                                                  var activeElement = document.activeElement;

                                            element = $j(element);

                                            var n = document.createTextNode(' ');

                                            element.appendChild(n);

                                            element.removeChild(n);

                                            // below needed for IE only

                                            if (activeElement) {

                                                                      activeElement.focus();

                                                                      if (activeElement.select) {

                                                                                activeElement.select;

                                                                      }

                                                            }

                                          } catch(e) { }

                              }

[eric.roth]

Nina - have you had any luck finding a workaround for this?  I am also seeing the same issue but haven't come up with a solution yet. 

[jsightler]

I am also curious if anyone has found a workaround for this issue. I am having what appears to be exactly the same issue... the user tabs from a input box to a select box, and as soon as the input element is updated, the focus is lost.

This only happens in IE (currently testing with IE8 in both normal and "compatibility" mode).

[dbesedic]

Ist has been a while since the last post. Has maybe anyone found a solution?

As Jess already stated the problem comes in conjunction with select boxes - when the focus goes to a select box or leaves from a select box (I'm not shure but also with a checkbox). Strange thing ist that with an "normal" input text field  everything is OK.

If anyone has an Idea how to analyse/debug/solve this problem, please don't hesitate to share your Ideas...

[jsightler]

@Damir - I was able to workaround it in my case, as I didn't actually need to rerender the input itself. I was only needing to rerender a separate error label, but the input was being rerendered inadvertantly due to being part of a s:decorate element. Changing the rerender attributes was enough to get just the label to rerender.

I suspect you could accomplish something similar with javascript and a separate div. Ie, have the a4j process update the separate div to indicate an error and fire a JS function, then the JS function modifies CSS attributes on the input element itself. That's very ugly, but it's the only type of workaround that I've had any success with for this issue.

[dbesedic]

Thanks Jess.

It appears that my problem is a diffent one that your one. As in your workarround, we allready had that Situation that only the error mgs was rerendered. But in IE7 and on some places in IE8 we had the Situation with lost focus. In Chrome and Firefox everything worked as expected. After spending really too much time on this problem we finnally found the that an ajax-rendered <a4j:outputpanel> was problematic. the outputpanel was placed in the same form with the input fields (before them). As soon as we had removed the outputpanel everything worked OK.