how to set editBox focus after panel/page refresh - xpages

Question

On my xPage I have just a panel and editBox inside.
<xp:panel id="panel1">
<xp:inputText id="inputText1">
<xp:eventHandler event="onkeydown" submit="true"
refreshMode="partial" refreshId="panel1">
</xp:eventHandler></xp:inputText>
</xp:panel>
by pressing Enter key in editBox I want to refresh my panel1 and then return focus to my edit box inputText1.
P.S. it's supposed there are other components on that panel this is why I want to refresh it once user enter something into editbox and press Enter key. Any focus() set code doesn't work once you refresh the panel either into onkeydown event or in onComplete of eventhandler. But you can set the focus if you ouside of that panel (e.g. new button with onclick event "...focus())"

Answer 1

Pressing the enter key is a normal function to receive via a JavaScript listener. Triggering a partial refresh can also be done from JavaScript via the client-side XSP object. Here's how a basic implementation would look.
<xp:panel
id="panel1">
<xp:inputText
id="inputText1">
<xp:eventHandler
event="onkeydown"
submit="false"
id="eventHandler1"
execMode="partial">
<xp:this.script><![CDATA[if(event.keyCode == 13){
event.preventDefault();
XSP.partialRefreshPost("#{id:panel1}",{
onComplete: function(){
document.getElementById("#{id:inputText1}").focus();
}
});
}]]></xp:this.script>
</xp:eventHandler>
</xp:inputText>
</xp:panel>
Edit:
I forgot to use event.preventDefault() on the enter action. I confirmed this as working in a sample XPage, shown here. Alternatively, in place of the focus call, you could use a select to highlight existing text, or do something else to put the cursor at the end of the field.

Answer 2

I wrote a general purpose snippet a while back that tries to counteract the effect of partial refresh on focus states. If I understand your issue correctly, this would remove the need to "hard code" which field you want to have focus after the refresh. You will also need the snippet for hijacking partial refreshes.
I think the only thing you need to to to the field after you've added the two snippets is to make sure that the event handler/partial refresh only fires on the enter key.
In client script: return ( thisEvent.keyCode === 13 );
Code snippet for hijacking partial refreshes:
function hijackAndPublishPartialRefresh(){
// Hijack the partial refresh
XSP._inheritedPartialRefresh = XSP._partialRefresh;
XSP._partialRefresh = function( method, form, refreshId, options ){
// Publish init
dojo.publish( 'partialrefresh-init', [ method, form, refreshId, options ]);
this._inheritedPartialRefresh( method, form, refreshId, options );
}
// Publish start, complete and error states
dojo.subscribe( 'partialrefresh-init', function( method, form, refreshId, options ){
if( options ){ // Store original event handlers
var eventOnStart = options.onStart;
var eventOnComplete = options.onComplete;
var eventOnError = options.onError;
}
options = options || {};
options.onStart = function(){
dojo.publish( 'partialrefresh-start', [ method, form, refreshId, options ]);
if( eventOnStart ){
if( typeof eventOnStart === 'string' ){
eval( eventOnStart );
} else {
eventOnStart();
}
}
};
options.onComplete = function(){
dojo.publish( 'partialrefresh-complete', [ method, form, refreshId, options ]);
if( eventOnComplete ){
if( typeof eventOnComplete === 'string' ){
eval( eventOnComplete );
} else {
eventOnComplete();
}
}
};
options.onError = function(){
dojo.publish( 'partialrefresh-error', [ method, form, refreshId, options ]);
if( eventOnError ){
if( typeof eventOnError === 'string' ){
eval( eventOnError );
} else {
eventOnError();
}
}
};
});
}
Code snippet for remembering focus states:
dojo.addOnLoad(function(){
dojo.subscribe( 'partialrefresh-init', function(){
// setTimeout needed to make it work in Firefox
setTimeout(function(){
var activeElementId = document.activeElement.id;
var focusSubscription = dojo.subscribe( 'partialrefresh-complete', function(){
// Only set focus if field hasn't been overwritten/lost focus
if( document.activeElement.id !== activeElementId ){
var activeElement = dojo.byId(activeElementId);
if( activeElement && /INPUT|SELECT|TEXTAREA/.test( activeElement.nodeName ) ){
// Set focus to element/select text
activeElement.focus();
if( activeElement.nodeName !== 'SELECT' ){
activeElement.select();
}
}
}
// Unsubscribe after focus attempt is done
dojo.unsubscribe( focusSubscription );
});
// In case of error -> remove subscription
var errorSubscription = dojo.subscribe( 'partialrefresh-error', function(){
dojo.unsubscribe( focusSubscription );
});
}, 0 );
} );
});