Add closeMenuOnSelect prop to DTableSelect and fix RoleStatusEditor d…

src/DTableSelect/index.js

@@ -24,6 +24,7 @@ export default class DTableSelect extends React.Component {
     customFilterOption: PropTypes.func,
     form: PropTypes.string,
     autoFocus: PropTypes.bool,
+    closeMenuOnSelect: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -35,6 +36,7 @@ export default class DTableSelect extends React.Component {
     placeholder: '',
     isMulti: false,
     autoFocus: false,
+    closeMenuOnSelect: true,
     menuPortalTarget: '.modal',
     noOptionsMessage: () => {
       return null;
@@ -43,7 +45,7 @@ export default class DTableSelect extends React.Component {
 
   render() {
     const { options, onChange, value, isSearchable, placeholder, isMulti, menuPosition, isClearable, noOptionsMessage,
-      classNamePrefix, style, innerRef, isDisabled, form, customFilterOption, autoFocus, className } = this.props;
+      classNamePrefix, style, innerRef, isDisabled, form, customFilterOption, autoFocus, className, closeMenuOnSelect } = this.props;
     return (
       <Select
         value={value}
@@ -61,6 +63,7 @@ export default class DTableSelect extends React.Component {
         menuShouldScrollIntoView
         menuPortalTarget={document.querySelector(this.props.menuPortalTarget)}
         captureMenuScroll={false}
+        closeMenuOnSelect={closeMenuOnSelect}
         hideSelectedOptions={false}
         noOptionsMessage={noOptionsMessage}
         isDisabled={isDisabled}

src/RoleStatusEditor/index.css

@@ -21,6 +21,7 @@
 
 .role-status-editor .dropdown-menu {
   max-width: 200px;
+  overflow-y: auto;
 }
 
 .role-status-editor .dropdown-menu .dropdown-item {

src/RoleStatusEditor/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import classnames from 'classnames';
@@ -15,6 +15,19 @@ const propTypes = {
 
 const RoleStatusEditor = ({ isShowDropdownIcon, currentOption, menuOptions, onChangeOption, closeShowDropdownIcon }) => {
   const [isOpen, setIsOpen] = useState(false);
+  // set max height to 320px
+  const [menuMaxHeight, setMenuMaxHeight] = useState(320);
+  const toggleRef = useRef(null);
+
+  useEffect(() => {
+    if (isOpen && toggleRef.current) {
+      const rect = toggleRef.current.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom - 8;
+      const spaceAbove = rect.top - 8;
+      const maxAvailable = Math.max(spaceBelow, spaceAbove);
+      setMenuMaxHeight(Math.min(maxAvailable, 320));
+    }
+  }, [isOpen]);
 
   const handleClickMenuOption = (menuOption) => {
     const { value } = menuOption;
@@ -29,14 +42,15 @@ const RoleStatusEditor = ({ isShowDropdownIcon, currentOption, menuOptions, onCh
       className="role-status-editor"
       toggle={() => setIsOpen(!isOpen)}
     >
-      <DropdownToggle className="dropdown-toggle-button d-flex align-items-center" tag="div">
+      <DropdownToggle innerRef={toggleRef} className="dropdown-toggle-button d-flex align-items-center" tag="div">
         {currentOption.label}
         <div className="dropdown-icon-container ml-1">
           <span className={classnames('dtable-font dtable-icon-down3', { 'hide': !isShowDropdownIcon })} />
         </div>
       </DropdownToggle>
       <DropdownMenu
         className="position-fixed"
+        style={{ maxHeight: menuMaxHeight }}
         modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
       >
         {menuOptions.map(option => {