Uploaded image for project: 'PUBLIC - Liferay Faces'
  1. PUBLIC - Liferay Faces
  2. FACES-3328

PrimeFaces markup remains after SPA navigation in Liferay 7.0+

    Details

      Description

      As described in this StackOverflow post and FACES-2677, many popular PrimeFaces components such as p:selectOneMenu and p:calendar append markup elements as children of the <body> tag since PrimeFaces assumes a webapp environment (where the JSF app controls the whole page).

      Steps to reproduce:

      1. Create three pages ("A", "B", "C").
      2. Add a portlet with p:calendar and p:selectOneMenu in it to page "B".
      3. Navigate to page "A".
      4. Hard refresh the page (clear cache).
      5. Click the page "B" link.
      6. Click the p:calendar button to pop up the calendar.
      7. Click the page "C" link.

      If the bug still exists the p:calendar and p:selectOneMenu markup will still appear on the page (unstyled).

      If the bug is fixed, the markup for both components won't appear.

      Workarounds

      There are several possible workarounds to this problem (I've ordered them from best to worst):

      • If the component has an appendTo attribute, ensure that markup is appended to an element inside the portlet markup: appendTo="@this", appendTo="@id(${portletNamespace})" (for the outermost <div> of the portlet) or appendTo="@form" should also work (although appendTo="@root" does not appear to work) (see the PF User Guide (p. 558) for more details on the "Search Expression Framework").
      • Permanently hide the dynamic elements with CSS. To ensure the CSS is not removed on SennaJS navigation, set data-senna-track="permanent":
         <h:head>
             <!--You'll need to look at the CSS for each element (not just tooltip)
                 to figure out what CSS classes should be hidden. -->
             <style id="hidePrimeFacesLeftoverMarkupWorkaroundCSS"
                 data-senna-track="permanent">
                 .ui-tooltip {
                     display: none;
                 }
             </style>
         </h:head>
        
      • Disable SennaJS for your Portlet or your entire Portal.

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                kyle.stiemann Kyle Stiemann
                Reporter:
                kyle.stiemann Kyle Stiemann
                Participants of an Issue:
              • Votes:
                0 Vote for this issue
                Watchers:
                0 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: