Bugfix/dropdown correct display

packages/asc-web-common/components/AdvancedSelector/AdvancedSelector.js

@@ -17,7 +17,6 @@ class AdvancedSelector extends React.Component {
     super(props);
 
     this.ref = React.createRef();
-
     this.state = {
       displayType: this.getTypeByWidth(),
     };
@@ -87,15 +86,24 @@ class AdvancedSelector extends React.Component {
 
   render() {
     const { displayType } = this.state;
-    const { isOpen, id, className, style, withoutAside } = this.props;
+    const {
+      isOpen,
+      id,
+      className,
+      style,
+      withoutAside,
+      isDefaultDisplayDropDown,
+    } = this.props;
 
     //console.log(`AdvancedSelector render() isOpen=${isOpen} displayType=${displayType}`);
 
     return (
-      <div ref={this.ref} id={id} className={className} style={style}>
+      <div id={id} className={className} style={style}>
         {displayType === "dropdown" ? (
           <DropDown
+            forwardedRef={this.ref}
             open={isOpen}
+            isDefaultMode={isDefaultDisplayDropDown ? true : false}
             className="dropdown-container"
             clickOutsideAction={this.onClose}
           >
@@ -157,6 +165,7 @@ AdvancedSelector.propTypes = {
   onCancel: PropTypes.func,
   onAddNewClick: PropTypes.func,
   loadNextPage: PropTypes.func,
+  isDefaultDisplayDropDown: PropTypes.bool,
 };
 
 AdvancedSelector.defaultProps = {
@@ -168,6 +177,7 @@ AdvancedSelector.defaultProps = {
   allowAnyClickClose: true,
   displayType: "auto",
   options: [],
+  isDefaultDisplayDropDown: true,
 };
 
 export default AdvancedSelector;

packages/asc-web-common/components/FilterInput/sub-components/HideFilter.js

@@ -61,6 +61,7 @@ class HideFilter extends React.Component {
 
         <div className="dropdown-style" ref={this.dropDownRef}>
           <DropDown
+            forwardedRef={this.ref}
             className="drop-down hide-filter-drop-down"
             clickOutsideAction={this.handleClickOutside}
             manualY="8px"

packages/asc-web-common/custom.scss

@@ -19,6 +19,10 @@ body {
   }
 }
 
+.table-container_settings-checkbox {
+  padding: 8px 16px;
+}
+
 body {
   margin: 0;
 }

packages/asc-web-components/combobox/index.js

@@ -89,14 +89,16 @@ class ComboBox extends React.Component {
       toggleAction,
       textOverflow,
       showDisabledItems,
+      isDefaultMode,
     } = this.props;
     const { isOpen, selectedOption } = this.state;
 
     const dropDownMaxHeightProp = dropDownMaxHeight
       ? { maxHeight: dropDownMaxHeight }
       : {};
-    const dropDownManualWidthProp = scaledOptions
-      ? { manualWidth: "100%" }
+
+    const dropDownManualWidthProp = this.ref.current
+      ? { manualWidth: this.ref.current.clientWidth + "px" }
       : {};
 
     const optionsLength = options.length
@@ -140,10 +142,12 @@ class ComboBox extends React.Component {
             directionY={directionY}
             manualY="102%"
             open={isOpen}
+            forwardedRef={this.ref}
             clickOutsideAction={this.handleClickOutside}
             {...dropDownMaxHeightProp}
             {...dropDownManualWidthProp}
             showDisabledItems={showDisabledItems}
+            isDefaultMode={isDefaultMode}
           >
             {advancedOptions
               ? advancedOptions
@@ -175,7 +179,7 @@ ComboBox.propTypes = {
   /** X direction selection */
   directionX: PropTypes.oneOf(["left", "right"]),
   /** Y direction selection */
-  directionY: PropTypes.oneOf(["bottom", "top"]),
+  directionY: PropTypes.oneOf(["bottom", "top", "both"]),
   /** Component Display Type */
   displayType: PropTypes.oneOf(["default", "toggle"]),
   /** Height of Dropdown */
@@ -210,6 +214,8 @@ ComboBox.propTypes = {
   textOverflow: PropTypes.bool,
   /** Disables clicking on the icon */
   disableIconClick: PropTypes.bool,
+  /** Defines the operation mode of the component, by default with the portal */
+  isDefaultMode: PropTypes.bool,
 };
 
 ComboBox.defaultProps = {
@@ -221,6 +227,7 @@ ComboBox.defaultProps = {
   size: "base",
   disableIconClick: true,
   showDisabledItems: false,
+  isDefaultMode: true,
 };
 
 export default ComboBox;

packages/asc-web-components/context-menu-button/index.js

@@ -196,6 +196,7 @@ class ContextMenuButton extends React.Component {
             directionX={directionX}
             directionY={directionY}
             open={isOpen}
+            forwardedRef={this.ref}
             clickOutsideAction={this.clickOutsideAction}
             columnCount={columnCount}
             withBackdrop={!!isMobile}

packages/asc-web-components/date-picker/index.js

@@ -347,9 +347,11 @@ class DatePicker extends Component {
           displayType === "dropdown" ? (
             <DropDownStyle>
               <DropDown
+                forwardedRef={this.ref}
                 className="drop-down"
                 open={isOpen}
                 clickOutsideAction={this.onClose}
+                isDefaultMode={false}
               >
                 {this.renderBody()}
               </DropDown>

packages/asc-web-components/drop-down/index.js

@@ -3,6 +3,8 @@ import PropTypes from "prop-types";
 import { VariableSizeList } from "react-window";
 import onClickOutside from "react-onclickoutside";
 import { isMobile } from "react-device-detect";
+import Portal from "../portal";
+import DomHelpers from "../utils/domHelpers";
 
 import CustomScrollbarsVirtualList from "../scrollbar/custom-scrollbars-virtual-list";
 import DropDownItem from "../drop-down-item";
@@ -36,26 +38,33 @@ class DropDown extends React.PureComponent {
       directionX: props.directionX,
       directionY: props.directionY,
     };
-
     this.dropDownRef = React.createRef();
   }
 
   componentDidMount() {
     if (this.props.open) {
       this.props.enableOnClickOutside();
-      this.checkPosition();
+      if (this.props.isDefaultMode) {
+        return setTimeout(() => this.checkPositionPortal(), 0); // ditry, but need after render for ref
+      }
+      return this.checkPosition();
     }
   }
 
   componentWillUnmount() {
     this.props.disableOnClickOutside();
+    this.unbindDocumentResizeListener();
   }
 
   componentDidUpdate(prevProps) {
     if (this.props.open !== prevProps.open) {
       if (this.props.open) {
         this.props.enableOnClickOutside();
-        this.checkPosition();
+        this.bindDocumentResizeListener();
+        if (this.props.isDefaultMode) {
+          return this.checkPositionPortal();
+        }
+        return this.checkPosition();
       } else {
         this.props.disableOnClickOutside();
       }
@@ -72,6 +81,29 @@ class DropDown extends React.PureComponent {
       this.props.clickOutsideAction(e, !this.props.open);
   };
 
+  bindDocumentResizeListener() {
+    if (!this.documentResizeListener) {
+      this.documentResizeListener = (e) => {
+        if (this.props.open) {
+          if (this.props.isDefaultMode) {
+            this.checkPositionPortal();
+          } else {
+            this.checkPosition();
+          }
+        }
+      };
+
+      window.addEventListener("resize", this.documentResizeListener);
+    }
+  }
+
+  unbindDocumentResizeListener() {
+    if (this.documentResizeListener) {
+      window.removeEventListener("resize", this.documentResizeListener);
+      this.documentResizeListener = null;
+    }
+  }
+
   checkPosition = () => {
     if (!this.dropDownRef.current) return;
 
@@ -95,6 +127,46 @@ class DropDown extends React.PureComponent {
     });
   };
 
+  checkPositionPortal = () => {
+    const parent = this.props.forwardedRef;
+    const rects = parent.current.getBoundingClientRect();
+
+    let dropDownHeight = this.dropDownRef.current.offsetParent
+      ? this.dropDownRef.current.offsetHeight
+      : DomHelpers.getHiddenElementOuterHeight(this.dropDownRef.current);
+
+    let left = rects.left;
+    let bottom = rects.bottom;
+
+    const viewport = DomHelpers.getViewport();
+    const dropDownRects = this.dropDownRef.current.getBoundingClientRect();
+
+    if (
+      this.props.directionY === "top" ||
+      (this.props.directionY === "both" &&
+        rects.bottom + dropDownHeight > viewport.height)
+    ) {
+      bottom -= parent.current.clientHeight + dropDownHeight;
+    }
+
+    if (this.props.right) {
+      this.dropDownRef.current.style.right = this.props.right;
+    } else if (this.props.directionX === "right") {
+      this.dropDownRef.current.style.left =
+        rects.right - this.dropDownRef.current.clientWidth + "px";
+    } else {
+      this.dropDownRef.current.style.left = left + "px";
+    }
+
+    this.dropDownRef.current.style.top = this.props.top || bottom + "px";
+
+    this.setState({
+      directionX: this.props.directionX,
+      directionY: this.props.directionY,
+      width: dropDownRects.width,
+    });
+  };
+
   getItemHeight = (item) => {
     const isTablet = window.innerWidth < 1024; //TODO: Make some better
 
@@ -123,7 +195,7 @@ class DropDown extends React.PureComponent {
     }
   };
 
-  render() {
+  renderDropDown() {
     const { maxHeight, children, showDisabledItems } = this.props;
     const { directionX, directionY, width } = this.state;
     let cleanChildren;
@@ -169,6 +241,16 @@ class DropDown extends React.PureComponent {
       </StyledDropdown>
     );
   }
+  render() {
+    const { isDefaultMode } = this.props;
+    const element = this.renderDropDown();
+
+    if (isDefaultMode) {
+      return <Portal element={element} appendTo={this.props.appendTo} />;
+    }
+
+    return element;
+  }
 }
 
 const EnhancedComponent = onClickOutside(DropDown);
@@ -211,7 +293,7 @@ DropDownContainer.propTypes = {
   /** Sets the opening direction relative to the parent */
   directionX: PropTypes.oneOf(["left", "right"]), //TODO: make more informative
   /** Sets the opening direction relative to the parent */
-  directionY: PropTypes.oneOf(["bottom", "top"]),
+  directionY: PropTypes.oneOf(["bottom", "top", "both"]),
   /** Accepts id */
   id: PropTypes.string,
   /** Required if you need to specify the exact width of the component, for example 100% */
@@ -232,13 +314,17 @@ DropDownContainer.propTypes = {
   columnCount: PropTypes.number,
   /** Display disabled items or not */
   showDisabledItems: PropTypes.bool,
+  forwardedRef: PropTypes.shape({ current: PropTypes.any }),
+  /** Defines the operation mode of the component, by default with the portal */
+  isDefaultMode: PropTypes.bool,
 };
 
 DropDownContainer.defaultProps = {
   directionX: "left",
   directionY: "bottom",
   withBackdrop: true,
   showDisabledItems: false,
+  isDefaultMode: true,
 };
 
 export default DropDownContainer;

packages/asc-web-components/group-button/index.js

@@ -138,6 +138,7 @@ class GroupButton extends React.Component {
               </Caret>
             </StyledDropdownToggle>
             <DropDown
+              forwardedRef={this.ref}
               {...dropDownMaxHeightProp}
               {...offsetSelectDropDown}
               manualY="72px"

packages/asc-web-components/link-with-dropdown/index.js

@@ -109,6 +109,7 @@ class LinkWithDropdown extends React.Component {
           className="fixed-max-width"
           open={this.state.isOpen}
           withArrow={false}
+          forwardedRef={this.ref}
           clickOutsideAction={this.onClose}
           {...rest}
         >

packages/asc-web-components/main-button/index.js

@@ -75,6 +75,9 @@ class MainButton extends React.PureComponent {
 
   render() {
     //console.log("MainButton render");
+    const dropDownManualWidthProp = this.ref.current
+      ? { manualWidth: this.ref.current.clientWidth + "px" }
+      : {};
     return (
       <GroupMainButton {...this.props} ref={this.ref}>
         <StyledMainButton {...this.props} onClick={this.onMainButtonClick}>
@@ -84,8 +87,10 @@ class MainButton extends React.PureComponent {
         </StyledMainButton>
         {this.props.isDropdown ? (
           <StyledDropDown
+            forwardedRef={this.ref}
             open={this.state.isOpen}
             clickOutsideAction={this.handleClick}
+            {...dropDownManualWidthProp}
             {...this.props}
             onClick={this.onDropDownClick}
           />

packages/asc-web-components/paging/index.js

@@ -114,7 +114,7 @@ Paging.propTypes = {
   /** Items per page combo box items */
   countItems: PropTypes.array,
   /** Indicates opening direction of combo box */
-  openDirection: PropTypes.oneOf(["bottom", "top"]),
+  openDirection: PropTypes.oneOf(["bottom", "top", "both"]),
   /** Accepts class */
   className: PropTypes.string,
   /** Accepts id */

packages/asc-web-components/progress-bar/index.js

@@ -52,7 +52,7 @@ const ProgressBar = (props) => {
       </div>
       <div className="progress-bar_field" />
       {dropDownContent && (
-        <DropDown open={isOpen} clickOutsideAction={onClose}>
+        <DropDown open={isOpen} clickOutsideAction={onClose} forwardedRef={ref}>
           <div className="progress-bar_drop-down">{dropDownContent}</div>
         </DropDown>
       )}

packages/asc-web-components/table-container/TableSettings.js

@@ -40,6 +40,7 @@ const TableSettings = ({ columns }) => {
         directionX="right"
         open={isOpen}
         clickOutsideAction={clickOutsideAction}
+        forwardedRef={ref}
         withBackdrop={false}
       >
         {columns.map((column) => {