first component focused in

Question

I have a JSF page, when I click on the element I show <p:dialog>.

Page Code:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:form id="userCV" styleClass="bodyStyle">
     ....button here to show the dialog
    </h:form>
<p:dialog header="ESPERIENZA PROFESSIONALE" widgetVar="detailEspPro"
    resizable="true"  position="center" 
    showEffect="clip" closable="false">

    <ui:include src="/dialog/detailEspPro.xhtml" />
</p:dialog>
</ui:composition>

Dialog detailEspPro.xhtml :

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <h:form id="detailEspProForm">

        <p:blockUI block="detailEspProForm" widgetVar="blockDetailEspProForm" />

        <h:panelGrid  columns="2" styleClass="detailInfoPersoStyle" border="0">

            <p:column>
                <h:outputText value="Da: " />
                <p:calendar  value="#{userPage.candidato.datanascita}" lang="it" navigator="true" mask="true"  pattern="dd/MM/yyyy" placeholder="dd/MM/yyyy"/>
            </p:column>

            <p:column>
                <h:outputText value="A: " />
                <p:calendar  value="#{userPage.candidato.datanascita}" lang="it" navigator="true" mask="true"  pattern="dd/MM/yyyy" placeholder="dd/MM/yyyy"/>
            </p:column>
            <p:column>
            </p:column>
        </h:panelGrid>

        <h:panelGrid columns="2">

            <p:commandButton value="Save" icon="ui-icon-check" onclick="PF('blockDetailEspProForm').show();" oncomplete="PF('blockDetailEspProForm').hide();PF('detailEspPro').hide(); PF('blockForm').hide();" actionListener="#{userPage.saveChange()}" update=":userCV"/>


            <p:commandButton value="Annulla" icon="ui-icon-cancel" label="Annulla"
                onclick="PF('detailEspPro').hide();"
                oncomplete="PF('blockForm').hide();" update=":userCV @form" actionListener="#{userPage.annullaModifica()}"/>
        </h:panelGrid>

    </h:form>


</ui:composition>

Problem:

When the dialog is shown for the first time, the first component is focused like this:

enter image description here

but I'de like to undo the focus, like this: (you can get it when you click with mouse out of component)

enter image description here

I think the problem is in the <p:dialog> not in the first component; in my case is a <p:calendar>, I've tired to put a inputText as the first element, it's focused like this:

<p:inputText value="ali sghaier" />

result (the mouse is in the first position of the string "ali sghaier" ):

enter image description here

I preferred the position selected in automatique is in the end of the string

enter image description here

I'm using:

JSF 2.2.5

PrimeFaces 5

score 3 · Accepted Answer · edited May 23 '17 at 11:49

Actually this is a bug in jQuery-UI Dialog, which has been fixed in jQuery UI 1.10.0m.

You have multiple ways to fix it, personally I prefer this one, just include this in the beginning of the form:

<span class="ui-helper-hidden-accessible">
   <input type="text" aria-hidden="true" />
</span>

Or

you can execute this in the document.ready

$.ui.dialog.prototype._focusTabbable = function(){};

Read More

Prevent jQuery UI dialog from setting focus to first textbox

first component focused in

1 Answers1