Fixed #5566 dropdown popup positioning in contents page

packages/volto/news/5566.bugfix

@@ -0,0 +1 @@
+Implemented PopperJS to correctly position the pop-up menu on the contents page. @kanhaiya04

packages/volto/src/components/manage/Contents/ContentsItem.jsx

@@ -3,14 +3,14 @@
  * @module components/manage/Contents/ContentsItem
  */
 
-import React from 'react';
-import { Button, Table, Menu, Divider } from 'semantic-ui-react';
+import React, { useState } from 'react';
+import { Button, Table, Menu, Divider, Ref } from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { map } from 'lodash';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
-import { Circle, FormattedDate, Icon, Popup } from '@plone/volto/components';
-import { getContentIcon } from '@plone/volto/helpers';
+import { Circle, FormattedDate, Icon } from '@plone/volto/components';
+import { getContentIcon, useDetectClickOutside } from '@plone/volto/helpers';
 import moreSVG from '@plone/volto/icons/more.svg';
 import checkboxUncheckedSVG from '@plone/volto/icons/checkbox-unchecked.svg';
 import checkboxCheckedSVG from '@plone/volto/icons/checkbox-checked.svg';
@@ -25,6 +25,8 @@ import dragSVG from '@plone/volto/icons/drag.svg';
 import cx from 'classnames';
 
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import { usePopper } from 'react-popper';
+import { Portal } from 'react-portal';
 
 const messages = defineMessages({
   private: {
@@ -93,6 +95,30 @@ export const ContentsItemComponent = ({
   isDragging,
   order,
 }) => {
+  const [isOpenDropDownPopUp, setOpenDropDownPopUp] = React.useState(false);
+  const [referenceElement, setReferenceElement] = useState(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: 'bottom-end',
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 2],
+        },
+      },
+      {
+        name: 'flip',
+        options: {
+          fallbackPlacements: ['left', 'top-start'],
+        },
+      },
+    ],
+  });
+  const clickOutsideDropDownPopUpRef = useDetectClickOutside({
+    onTriggered: () => setOpenDropDownPopUp(false),
+    triggerKeys: ['Escape'],
+  });
   const intl = useIntl();
 
   return connectDropTarget(
@@ -221,83 +247,103 @@ export const ContentsItemComponent = ({
           className={cx('', { 'dragging-cell': isDragging })}
           textAlign="right"
         >
-          <Popup
-            menu={true}
-            position="bottom right"
-            flowing={true}
-            basic={true}
-            on="click"
-            popper={{
-              className: 'dropdown-popup',
-            }}
-            trigger={
-              <Icon
-                name={moreSVG}
-                className="dropdown-popup-trigger"
-                size="24px"
-                color="#007eb1"
-              />
-            }
-          >
-            <Menu vertical borderless fluid>
-              <Link className="item icon-align" to={`${item['@id']}/edit`}>
-                <Icon name={editingSVG} color="#007eb1" size="24px" />{' '}
-                <FormattedMessage id="Edit" defaultMessage="Edit" />
-              </Link>
-              <Link className="item right-dropdown icon-align" to={item['@id']}>
-                <Icon name={showSVG} color="#007eb1" size="24px" />{' '}
-                <FormattedMessage id="View" defaultMessage="View" />
-              </Link>
-              <Divider />
-              <Menu.Item
-                onClick={onCut}
-                value={item['@id']}
-                className="right-dropdown icon-align"
+          <div ref={clickOutsideDropDownPopUpRef}>
+            <Ref innerRef={setReferenceElement}>
+              <Button
+                basic
+                icon
+                onClick={() => setOpenDropDownPopUp(!isOpenDropDownPopUp)}
+                className="add-block-button"
               >
-                <Icon name={cutSVG} color="#007eb1" size="24px" />{' '}
-                <FormattedMessage id="Cut" defaultMessage="Cut" />
-              </Menu.Item>
-              <Menu.Item
-                onClick={onCopy}
-                value={item['@id']}
-                className="right-dropdown icon-align"
-              >
-                <Icon name={copySVG} color="#007eb1" size="24px" />{' '}
-                <FormattedMessage id="Copy" defaultMessage="Copy" />
-              </Menu.Item>
-              <Menu.Item
-                onClick={onDelete}
-                value={item['@id']}
-                className="right-dropdown icon-align"
-              >
-                <Icon name={deleteSVG} color="#e40166" size="24px" />{' '}
-                <FormattedMessage id="Delete" defaultMessage="Delete" />
-              </Menu.Item>
-              <Divider />
-              <Menu.Item
-                onClick={onMoveToTop}
-                value={order}
-                className="right-dropdown icon-align"
-              >
-                <Icon name={moveUpSVG} color="#007eb1" size="24px" />{' '}
-                <FormattedMessage
-                  id="Move to top of folder"
-                  defaultMessage="Move to top of folder"
-                />
-              </Menu.Item>
-              <Menu.Item
-                onClick={onMoveToBottom}
-                value={order}
-                className="right-dropdown icon-align"
-              >
-                <Icon name={moveDownSVG} color="#007eb1" size="24px" />{' '}
-                <FormattedMessage
-                  id="Move to bottom of folder"
-                  defaultMessage="Move to bottom of folder"
+                <Icon
+                  name={moreSVG}
+                  className="dropdown-popup-trigger"
+                  size="24px"
+                  color="#007eb1"
                 />
-              </Menu.Item>
-            </Menu>
-          </Popup>
+              </Button>
+            </Ref>
+            {isOpenDropDownPopUp ? (
+              <Portal node={document.getElementById('body')}>
+                <div
+                  ref={setPopperElement}
+                  style={{
+                    ...styles.popper,
+                    visibility: styles.popper.visibility,
+                    zIndex: 1000,
+                    minWidth: '200px',
+                  }}
+                  className="popperJs-dropdown-popup"
+                  {...attributes.popper}
+                >
+                  <Menu vertical borderless fluid>
+                    <Link
+                      className="item icon-align"
+                      to={`${item['@id']}/edit`}
+                    >
+                      <Icon name={editingSVG} color="#007eb1" size="24px" />{' '}
+                      <FormattedMessage id="Edit" defaultMessage="Edit" />
+                    </Link>
+                    <Link
+                      className="item right-dropdown icon-align"
+                      to={item['@id']}
+                    >
+                      <Icon name={showSVG} color="#007eb1" size="24px" />{' '}
+                      <FormattedMessage id="View" defaultMessage="View" />
+                    </Link>
+                    <Divider />
+                    <Menu.Item
+                      onClick={onCut}
+                      value={item['@id']}
+                      className="right-dropdown icon-align"
+                    >
+                      <Icon name={cutSVG} color="#007eb1" size="24px" />{' '}
+                      <FormattedMessage id="Cut" defaultMessage="Cut" />
+                    </Menu.Item>
+                    <Menu.Item
+                      onClick={onCopy}
+                      value={item['@id']}
+                      className="right-dropdown icon-align"
+                    >
+                      <Icon name={copySVG} color="#007eb1" size="24px" />{' '}
+                      <FormattedMessage id="Copy" defaultMessage="Copy" />
+                    </Menu.Item>
+                    <Menu.Item
+                      onClick={onDelete}
+                      value={item['@id']}
+                      className="right-dropdown icon-align"
+                    >
+                      <Icon name={deleteSVG} color="#e40166" size="24px" />{' '}
+                      <FormattedMessage id="Delete" defaultMessage="Delete" />
+                    </Menu.Item>
+                    <Divider />
+                    <Menu.Item
+                      onClick={onMoveToTop}
+                      value={order}
+                      className="right-dropdown icon-align"
+                    >
+                      <Icon name={moveUpSVG} color="#007eb1" size="24px" />{' '}
+                      <FormattedMessage
+                        id="Move to top of folder"
+                        defaultMessage="Move to top of folder"
+                      />
+                    </Menu.Item>
+                    <Menu.Item
+                      onClick={onMoveToBottom}
+                      value={order}
+                      className="right-dropdown icon-align"
+                    >
+                      <Icon name={moveDownSVG} color="#007eb1" size="24px" />{' '}
+                      <FormattedMessage
+                        id="Move to bottom of folder"
+                        defaultMessage="Move to bottom of folder"
+                      />
+                    </Menu.Item>
+                  </Menu>
+                </div>
+              </Portal>
+            ) : null}
+          </div>
         </Table.Cell>
       </tr>,
     ),

packages/volto/src/components/manage/Contents/__snapshots__/ContentsItem.test.jsx.snap

@@ -115,24 +115,31 @@ exports[`ContentsItem renders a contents item component 1`] = `
   <td
     className="right aligned"
   >
-    <svg
-      className="icon dropdown-popup-trigger"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": undefined,
-        }
-      }
-      onClick={[Function]}
-      style={
-        Object {
-          "fill": "#007eb1",
-          "height": "24px",
-          "width": "auto",
-        }
-      }
-      viewBox=""
-      xmlns=""
-    />
+    <div>
+      <button
+        className="ui basic icon button add-block-button"
+        onClick={[Function]}
+      >
+        <svg
+          className="icon dropdown-popup-trigger"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": undefined,
+            }
+          }
+          onClick={null}
+          style={
+            Object {
+              "fill": "#007eb1",
+              "height": "24px",
+              "width": "auto",
+            }
+          }
+          viewBox=""
+          xmlns=""
+        />
+      </button>
+    </div>
   </td>
 </tr>
 `;

packages/volto/theme/themes/pastanaga/modules/popup.overrides

@@ -70,3 +70,16 @@
     }
   }
 }
+
+.popperJs-dropdown-popup {
+  > .menu {
+    .item {
+      display: flex !important;
+      align-items: center;
+
+      > .icon {
+        margin-right: 1rem;
+      }
+    }
+  }
+}