Controlling focus on form elements in a dialog

[tomik]

Hi,

I have been struggling with getting focus to work the way I need. Basically, when a user clicks on a button, a dialog with a form opens. However, I don't want for the focus to zoom in on the first inputText in the dialog -- which is what happens right now. It is also the case with the simple Ajax Dialog example in Primefaces showcase, but on the other hand, the login example doesn't not have the focus "issue" so it should be controllable.

Any ideas?

Thanks!!

Here's my code:

Code: Select all

<p:commandButton type="button" value="Add reference" onclick="dlg.show()" image="images/add.png" /> 
    
 <p:dialog id="dialog" header="New Reference" modal="true" resizable="false" 
 	widgetVar="dlg" underlay="shadow" width="450">  
     <h:form>   
         <h:panelGrid columns="4" cellpadding="5"> 
         	<h:outputLabel for="value" value="Text" />  
            <h:inputText id="value" value="#{bean.value}"  />
            <p:watermark for="pmid" value="Search keyword" />  
 			<p:commandButton value="Search"  
            	onclick="PrimeFaces.cleanWatermarks();" oncomplete="PrimeFaces.showWatermarks();"  />    
         </h:panelGrid>  
        <p:commandButton value="Submit" update=":display" oncomplete="dlg.hide();"/>
     </h:form>  
 </p:dialog>  

Tom

[cagatay.civici]

Dialog has onShow client side callback which you can write javacript to add focus to the dialog's first input component or play with p:focus component with the handy context option.

More info;

http://cagataycivici.wordpress.com/2010 ... rimefaces/

[tomik]

Thanks for the quick response!

The problem, though, is that I don't have <p: focus> declared on my site and yet the first input box of the dialog window gets focused on. My goal is to have no focus on the page.

When I remove the dialog component and place the form on the page directly, it works as expected -- i.e., no focus.

I don't see this happening with the Login Dialog demo in the Showcase, and I am not seeing any code that would suggest it is controlling it. On the other hand the Ajax Integration dialog demo appears to have focus "turned on", yet there is no <p: focus> tag in the code. What is the difference between the two examples and how can I shut it off for my dialog since I don't have the focus tag in my code?

Thanks again!

Tom

[cagatay.civici]

Maybe this would help;

http://stackoverflow.com/questions/1202 ... st-textbox

It seems jquery ui dialog we use underneath, adds focus automatically. As I've said, try onShow event to add focus to something else, like a dummy element on page.

[notcourage]

I added p:focus on the showcase sample dialogLogin.xhtml:

<p:focus id="focus" context="dialogId"/>
<p:dialog id="dialogId" header="Login" widgetVar="dlgVar" width="500" height="500" modal="true">

Bad: There's no focus when the dialog is shown. The update attribute doesn't solve this:

<h:outputLink id="loginLink" value="javascript:void(0)" update="focus" onclick="dlgVar.show()" title="login">
<h:outputText>Show Dialog</h:outputText>
</h:outputLink>

I added error messages and the update attribute:

<p:commandButton value="Save" update="growlId itemFormId focus"
actionListener="#{item.saveListener}"
oncomplete="kaSaveItem(xhr, status, args)">
</p:commandButton>

Good: The focus works when the button is clicked.

On a related topic, why is it necessary to put <p:focus> outside the dialog?

I have my own example which sets the focus within a tabView but the focus is not shown.

[notcourage]

I have a solution. When the tab switches, the onTabShow client-side callback invokes <p:remoteCommand update="focus">.

<script type="text/javascript">
function myOnTabShow(event, ui) {
if (ui.tab.innerHTML.indexOf("Login") != -1) updateLoginTab();
}
</script>

<p:tabView onTabShow="myOnTabShow(event, ui);">
<p:tab title="Login">
<p:focus id="loginFocus" context="loginForm"/>
<h:form id="loginForm">
<p:remoteCommand name="updateLoginTab" update="loginFocus">
<f:setPropertyActionListener value="#{true}" target="#{requestScope.dummy}"/>
</p:remoteCommand>

I hope there's a simpler way.