Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-122192

SelectedData property in openSelectionModal only affects single selection with Choose button

    Details

    • Type: Bug
    • Status: Verified
    • Resolution: Unresolved
    • Affects Version/s: Master
    • Fix Version/s: None
    • Labels:
      None
    • Fix Priority:
      2

      Description

      Description

      In the Segments Editor, we removed our custom user item selector and use the one in "users-admin-item-selector-web". This is working fine (you can select one or more users successfully) but if the user selects some data and opens the modal again, the data is not marked as selected (row active and/or checked checkbox, for example). I tried to use "selectedData" property from "openSelectionModal" but I saw that is very coupled to a view for single selection with Choose button (with class "selector-button").

      Research notes

      For a few days, I was trying different ideas to solve this bug but finally found something that can be the main problem.

      There is a property in "openSelectionModal" called "selectedData" which is used in "onOpen" method like this:

      onOpen: ({container, processClose}) => {
         const selectEventHandler = Liferay.on(selectEventName, (event) => {
            selectedItem = event.data || event;
      
            if (!multiple) {
               select({processClose});
            }
         });
      
         eventHandlers.push(selectEventHandler);
      
         const itemElements = container.querySelectorAll('.selector-button');
      
         if (selectedData) {
            const selectedDataSet = new Set(selectedData);
      
            itemElements.forEach((itemElement) => {
               const itemId =
                  itemElement.dataset.entityid ||
                  itemElement.dataset.entityname;
      
               if (selectedDataSet.has(itemId)) {
                  itemElement.disabled = true;
               }
            });
         }
      
         if (!customSelectEvent) {
            container.addEventListener('click', (event) => {
               const delegateTarget =
                  event.target &&
                  event.target.closest('.selector-button');
      
               if (delegateTarget) {
                  Liferay.fire(selectEventName, delegateTarget.dataset);
               }
            });
         }
      },
      

      There is a querySelectorAll with the CSS class "selector-button". This class is present in those cases when we have a single selection modal and has a "Choose" button in each row (for example, see: https://github.com/liferay-tango/liferay-portal/blob/0d895bc7dd40157f2ee6bda0bb89a615b0c6f407/modules/apps/roles/roles-admin-web/src/main/resources/META-INF/resources/select_regular_role.jspf#L77). But the "openSelectionModal" API does not support "selectedData" for neither multiple selection nor single selection without the Choose button (clicking directly in the name, for example).

      Lexicon Definition

      Lexicon team defines single and multiple selection modals as follows:

      A single selection must be done by clicking directly on the desired element. In this case, the element must not have a Choose or Select button. The modal doesn't have a footer as there is no need.

      * Multiple: https://liferay.design/lexicon/core-components/modals/#multiple-selection-inside-a-modal 

      Selecting multiple items in a modal must be done by selecting each desired element through a checkbox. The selection will be finished by clicking in the Done button at the modal footer.

      Examples in the portal

      • Multiple selection:
        • Web Content: Create Web Content with related assets. Product Menu > Content & Data > Web Content > + (create new one) and Related Assets
        • Blogs: Create a Blog with related assets. Product Menu > Content & Data > Blogs > + (create new one) and Related Assets
      • Single selection:
        • Users & Organizations: Memberships -> Sites (single without Choose button, nothing happen if we already have one selected) and User Groups (single with Choose button, disabled if the user group is selected)
        • Parent site: Product Menu > Configuration > Settings > Parent Site (single selection without Choose button)

      Conclusion

      After the research and after navigating through the portal, I saw that this bug happens in many places, not only in segmentation. I think that it would be a good idea to fix it from the base (openSelectionModal API).

      Thanks!

        Attachments

          Activity

            People

            Assignee:
            team-frontend-infra Product Team Frontend Infrastructure
            Reporter:
            sarai.diaz Sarai Diaz
            Participants of an Issue:
            Recent user:
            Marko Čikoš
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Dates

              Created:
              Updated:
              Days since last comment:
              30 weeks, 2 days ago

                Packages

                Version Package