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

liferay-ui:input-editor does not work in show/hide use case scenarios

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: liferay-faces-3.0.0-ga1, liferay-faces-3.1.0-ga1
    • Labels:
    • Environment:

      Description

      Using Liferay Faces in such a scenario when <liferay-ui:input-editor/> component should be hidden and shown again in case of partial-page rendering does not work.

      If partial rendering is not involved and the whole page gets reloaded over the course of the JSF lifecycle, everything is working as intended.

      The following piece demonstrates the desired use case:

      <h:form>
      	<h:panelGroup rendered="#{someBean.editorVisible}">
      		<liferay-ui:input-editor id="inputEditor" />
      	</h:panelGroup>
      	<h:commandButton
      		actionListener="#{someBean.changeVisibility}"
      		value="show editor"
      		rendered="#{! someBean.editorVisible}" />
      	<h:commandButton
      		actionListener="#{someBean.changeVisibility}"
      		value="hide editor"
      		rendered="#{someBean.editorVisible}" />
      </h:form>
      

      The phenomenon (with 3.0.0-GA1) is the following: if a button is clicked on CKEditor's toolbar (which pops up a modal dialog box) and the component has been previously hidden/shown, the whole page is shadowed and that background cover does not go away when the modal dialog is dismissed.

      Debugging reveled that CKEditor performs modifications to the DOM tree of the page during initialization and among others, it inserts a <div class="cke_dialog_background_cover" ... /> tag as a direct child of the body element in order to be able to cover the whole background when modal dialogs of CKEditor are shown. (In case of Firefox a small snippet of JS code also gets inserted into <body onpageshow="..."/>.)

      When actions are being performed on the page (eg. show/hide) and partial rendering is used, CKEditor is re-initialized and over the course of that, the aforementioned <div/> element gets duplicated (and the JS snippet is inserted into <body onpageshow="..."/> again). Because of that duplication using modal dialogs in CKEditor becomes broken.

      The behaviour mentioned above applies to 3.0.0-GA and 3.1.0-GA1, however (possibly) as of the introduction of fix FACES-1422 rendering <style/> and <script/> elements for CKEditor is being prevented by InputEditorInternalRenderer, if a resource request has been made. In this case (3.0.1-GA2 and 3.1.1-GA2), clicking on the hide button works correctly and CKEditor disappears, but after clicking the show again CKEditor is not rendered at all, since that <script/> element should have been sent to the browser in order to perform initialization.

      I've dropped a few sample projects for various (Liferay Faces versions) we were experimenting with to Github:

      https://github.com/laszlocsontos/liferay-faces/commits/input-editor-3.0.0-ga1
      https://github.com/laszlocsontos/liferay-faces/commits/input-editor-3.0.x
      https://github.com/laszlocsontos/liferay-faces/commits/input-editor-3.1.x

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              neil.griffin Neil Griffin
              Reporter:
              laszlo.csontos Laszlo Csontos (Inactive)
              Participants of an Issue:
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:

                  Packages

                  Version Package
                  liferay-faces-3.0.1-ga2
                  liferay-faces-3.1.1-ga2
                  liferay-faces-3.2.4-ga5