pe:layout and p:calendar possible collision on iPad

[smithh032772]

Below is a response to a topic in PrimeFaces Core forum, but wanted to share here.

No Sudheer... this is the normal primefaces components nothing related to primefaces mobile. I can confirm this on my ipad...

The PF application works well on both iPad and Android Pads, although we need to use h:selectOneMenu while not p:selectOneMenu. There are also some strange issues about p:calendar.

Today, my father showed me an issue on his iPad with p:calendar; when he clicks on the p:calendar button, the dropdown appears and then disappears; we duplicated that behavior a few times.

He said it was working well about 1 or 2 weeks ago. I recently added pe:layout, and there may be some type of collision between pe:layout and p:calendar. I also asked him to go to a different page in the web app that has pe:layout, p:calendar, AND pe:timePicker. The p:calendar does not have the p:calendar button on that page. We duplicated the same behavior there. From what I remember, pe:timePicker worked as designed, though; I didn't see that behavior occur with pe:timePicker, but then again, I don't remember really testing pe:timePicker when I was just at my dad's house.

I prefer h:selectOneMenu over p:selectOneMenu, since I'm trying to keep it simple with/for the endusers. I like the latest/recent features added to/for p:selectOneMenu, and decided to add it to my app, but then I pulled it out, since endusers not really using that/those added feature(s), and I still prefer consistency throughout my app, as much as possible; consistency with the look-n-feel of h:selectOneMenu.

Anyway, I need to figure out what I'm going to do about p:calendar issue in my app for iPad enduser. Android endusers are fine with the Android popup 'calendar' dialog via HTML5 type="date", but when I added HTML5 type="date" for mobile devices, my father preferred p:calendar over HTML5 type="date". I think I will at least add type="date" to p:calendar, OR, I may force him to use HTML5 type="date" on p:inputText (same implementation that Android endusers are loving, right now... myself included).

CLARIFICATION: this defect can be duplicated in Google Chrome browser on iPad

[smithh032772]

Searched google for the following:

stackoverflow ipad jquery datepicker

and found the following (for starters), so I guess I will try one of these and ask my father to test this possible fix/hack:

ipad web application: How do I prevent the keyboard from popping up on jquery datepicker

Ipad + How to prevent the keyboard from popping up on jquery datepicker

Might be better for me to set the inputText/field as 'disabled' via javascript/jQuery instead of JSF disabled="..." attribute of p:calendar, since I do NOT want to disable the datepicker, too.

[smithh032772]

ipad web application: How do I prevent the keyboard from popping up on jquery datepicker

Ipad + How to prevent the keyboard from popping up on jquery datepicker

These approaches above did not work for me, or maybe I just didn't code it correctly, but the following is a workaround or resolves this issue for me.

How can I suppress keyboard popup on an iPad HTML5 app?

So, the jQuery/javascript is as follows:

Code: Select all

function suppressDatePickerKeyboard() {

    // How can I suppress keyboard popup on an iPad HTML5 app?
    // http://stackoverflow.com/questions/3320404/how-can-i-suppress-keyboard-popup-on-an-ipad-html5-app
    $(".hasDatepicker").focus(function() {
        $(this).blur();
    });
    
    // look at 2nd answer at following URL
    // http://stackoverflow.com/questions/9985090/jquery-on-does-not-work-but-live-does
    // http://api.jquery.com/on/
    $('body').on("focus", '.hasDatepicker', function(){
        $(this).blur();
    });
    
 }

$(function(){

    suppressDatePickerKeyboard();
    
 });

And I added the following to all occurrences of <h:head> in my index.xhtml, since index.xhtml is the parent xhtml, which contains multiple <h:head> for conditional rendering and/or including resources, conditionally:

Code: Select all

<h:outputScript name="js/mcms_iPad.js" rendered="#{pf_usersController.loggedInViaIpad == 'Y'}"/>

[smithh032772]

My father just told me that the issue is not fixed yet. Shaking my head. Back to the drawing board. Hmmm, i hope I won't have to build a separate xhtml page (or pages) for iPad endusers, when view contains pe:layout and p:calendar.

I may need to build separate xhtml pages for iPad endusers, and render p:layout instead of pe:layout. OR, I could use HTML5 type="date", but my father preferred p:calendar (jQuery datepicker) popup, and I think I heard that iPad does not have a popup dialog for HTML5 type="date|time|datetime". shaking my head.