javascript - first component focused in -

javascript - first component focused in <p:dialog> -

i have jsf page, when click on element 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 show 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 dialog shown first time, first component focused this:

but i'de undo focus, this: (you can when click mouse out of component)

i think problem in <p:dialog> not in first component; in case <p:calendar>, i've tired set inputtext first element, it's focused this:

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

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

i preferred position selected in automatique in end of string

i'm using:

jsf 2.2.5

primefaces 5

actually bug in jquery-ui dialog, has been fixed in jquery ui 1.10.0m.

you have multiple ways prepare it, prefer one, include in origin of form:

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

or

you can execute in document.ready

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

read more

prevent jquery ui dialog setting focus first textbox

javascript jquery jsf jsf-2 primefaces