2 pe:timePicker components and p:focus behavior
Posted: 09 Oct 2012, 09:36
Wow, first time I ever seen this. Prior to adding pe:timePicker to one page, the page has p:focus that sets focus on many different components on the page. The first few components on the page is 2 sets of p:calendar and pe:timePicker. On AJAX response/update, p:focus is updated, and there seems to be a dance/animation going on the page, where BOTH pe:timePicker is playing tug-of-war for gaining 'focus'. While they are playing tug-of-war, the ajaxStatus is in the middle of it, taking no sides, but encouraging the two pe:timePicker's to go, go, go, go...infinitely, as long as the page is the active page in the browser.
xhtml below
There is some bean code that updates the p:focus via AjaxBehaviorEvent on components; to fix this, I'm going to make sure p:focus is not setting focus on the pe:timePicker components.
Issue 278 in PrimeFaces Extensions Issue tracker
xhtml below
Code: Select all
<p:layoutUnit position="center">
<p:focus id="columnWithFocus" for="#{pf_orderCostDetailsController.columnWithFocus}"/>
<!--
Temoporarily suppress beanvalidation with JSF
http://stackoverflow.com/questions/2332713/temoporarily-suppress-beanvalidation-with-jsf
-->
<f:validateBean disabled="true">
<p:panel header="Trip Dates, Group Size">
<h:panelGrid columns="2" cellpadding="3" cellspacing="3" width="100%">
<h:panelGrid columns="2" cellpadding="1" cellspacing="1"
rendered="#{pf_usersController.loggedInViaAndroid == 'Y'}">
<h:outputText value="Trip Date:" />
<p:inputText id="tripDateOnMobile"
value="#{pf_ordersController.tripDate[0]}"
label="Trip Date" type="date">
<f:convertDateTime pattern="yyyy-MM-dd" />
<p:ajax partialSubmit="false"
listener="#{pf_ordersController.tripDateChangedOnAddEdit}"
update="returnDateOnMobile :orderAddForm:formMessages :orderAddForm:dt_bookedTrips :orderAddForm:flightDataTable :orderAddForm:columnWithFocus :orderAddForm:_ajax_status"/>
</p:inputText>
<h:outputText value="Trip Time:" />
<p:inputText id="tripTimeOnMobile"
value="#{pf_ordersController.tripTime[0]}"
label="Trip Time" type="time">
<f:convertDateTime pattern="HH:mm" />
<p:ajax partialSubmit="false"
update="returnTimeOnMobile :orderAddForm:formMessages :orderAddForm:totalCostDiscountPanel :orderAddForm:pricingTabView :orderAddForm:dt_bookedTrips :orderAddForm:columnWithFocus :orderAddForm:_ajax_status"
listener="#{pf_ordersController.tripTimeChangedOnAddEdit()}"/>
</p:inputText>
</h:panelGrid>
<h:panelGrid columns="3" cellpadding="3" cellspacing="3"
rendered="#{pf_usersController.loggedInViaAndroid == 'N'}">
<h:outputText value="Trip Date/Time:" />
<p:calendar id="tripDate" value="#{pf_ordersController.tripDate[0]}"
pattern="MM/dd/yyyy" navigator="true"
size="12" label="Trip Date">
<f:convertDateTime pattern="MM/dd/yyyy" />
<p:ajax partialSubmit="false" event="dateSelect"
listener="#{pf_ordersController.tripDateSelectedOnAddEdit}"
update="returnDate :orderAddForm:formMessages :orderAddForm:dt_bookedTrips :orderAddForm:flightDataTable :orderAddForm:columnWithFocus :orderAddForm:_ajax_status" />
<p:ajax partialSubmit="false"
listener="#{pf_ordersController.tripDateChangedOnAddEdit}"
update="returnDate :orderAddForm:formMessages :orderAddForm:dt_bookedTrips :orderAddForm:flightDataTable :orderAddForm:columnWithFocus :orderAddForm:_ajax_status"/>
</p:calendar>
<pe:timePicker id="tripTime" value="#{pf_ordersController.tripTime[0]}"
label="Trip Time" mode="popup" showPeriod="true" style="width: 100px;">
<f:convertDateTime pattern="hh:mm a" />
<p:ajax partialSubmit="false" event="close"
listener="#{pf_ordersController.tripTimeChangedOnAddEditClose}"
update="returnTime :orderAddForm:formMessages :orderAddForm:totalCostDiscountPanel :orderAddForm:pricingTabView :orderAddForm:dt_bookedTrips :orderAddForm:columnWithFocus :orderAddForm:_ajax_status"/>
<p:ajax partialSubmit="false"
listener="#{pf_ordersController.tripTimeChangedOnAddEdit()}"
update="returnTime :orderAddForm:formMessages :orderAddForm:totalCostDiscountPanel :orderAddForm:pricingTabView :orderAddForm:dt_bookedTrips :orderAddForm:columnWithFocus :orderAddForm:_ajax_status"/>
</pe:timePicker>
</h:panelGrid>
<h:panelGrid columns="2" cellpadding="1" cellspacing="1"
rendered="#{pf_usersController.loggedInViaAndroid == 'Y'}">
<h:outputText value="Return Date:" />
<p:inputText id="returnDateOnMobile"
value="#{pf_ordersController.returnDate[0]}"
label="Return Date" type="date">
<f:convertDateTime pattern="yyyy-MM-dd" />
<p:ajax partialSubmit="false"
update=":orderAddForm:formMessages :orderAddForm:dt_bookedTrips :orderAddForm:columnWithFocus :orderAddForm:_ajax_status"
listener="#{pf_ordersController.returnDateChangedOnAddEdit()}"/>
</p:inputText>
<h:outputText value="Return Time:" />
<p:inputText id="returnTimeOnMobile"
value="#{pf_ordersController.returnTime[0]}"
label="Return Time" type="time">
<f:convertDateTime pattern="HH:mm" />
<p:ajax partialSubmit="false"
update="returnTimeOnMobile :orderAddForm:formMessages :orderAddForm:totalCostDiscountPanel :orderAddForm:pricingTabView :orderAddForm:dt_bookedTrips :orderAddForm:columnWithFocus :orderAddForm:_ajax_status"
listener="#{pf_ordersController.returnTimeChangedOnAddEdit()}"/>
</p:inputText>
</h:panelGrid>
<h:panelGrid columns="3" cellpadding="3" cellspacing="3"
rendered="#{pf_usersController.loggedInViaAndroid == 'N'}">
<h:outputText value="Return Date/Time:" />
<p:calendar id="returnDate" value="#{pf_ordersController.returnDate[0]}"
pattern="MM/dd/yyyy" navigator="true"
size="12" label="Return Date">
<f:convertDateTime pattern="MM/dd/yyyy" />
<p:ajax partialSubmit="false" event="dateSelect"
update=":orderAddForm:formMessages :orderAddForm:dt_bookedTrips :orderAddForm:columnWithFocus :orderAddForm:_ajax_status"
listener="#{pf_ordersController.returnDateSelectedOnAddEdit}"/>
<p:ajax partialSubmit="false"
update=":orderAddForm:formMessages :orderAddForm:dt_bookedTrips :orderAddForm:columnWithFocus :orderAddForm:_ajax_status"
listener="#{pf_ordersController.returnDateChangedOnAddEdit}"/>
</p:calendar>
<pe:timePicker id="returnTime" value="#{pf_ordersController.returnTime[0]}"
label="Return Time" mode="popup" showPeriod="true" style="width: 100px;">
<f:convertDateTime pattern="hh:mm a" />
<p:ajax partialSubmit="false" event="close"
listener="#{pf_ordersController.returnTimeChangedOnAddEditClose}"
update="returnTime :orderAddForm:formMessages :orderAddForm:totalCostDiscountPanel :orderAddForm:pricingTabView :orderAddForm:dt_bookedTrips :orderAddForm:columnWithFocus :orderAddForm:_ajax_status"/>
<p:ajax partialSubmit="false"
listener="#{pf_ordersController.returnTimeChangedOnAddEdit()}"
update="returnTime :orderAddForm:formMessages :orderAddForm:totalCostDiscountPanel :orderAddForm:pricingTabView :orderAddForm:dt_bookedTrips :orderAddForm:columnWithFocus :orderAddForm:_ajax_status"/>
</pe:timePicker>
</h:panelGrid>
</h:panelGrid>
Issue 278 in PrimeFaces Extensions Issue tracker