From f6f6023c12b539e44f91a565570bb9462d151a33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E7=8E=89=E9=91=AB?= <zhangyuxin9102@163.com>
Date: Tue, 26 May 2026 09:47:18 +0800
Subject: [PATCH] Add closeMenuOnSelect prop to DTableSelect and fix
 RoleStatusEditor dropdown overflow

- Add closeMenuOnSelect prop to DTableSelect component with default value true
- Add overflow-y auto to RoleStatusEditor dropdown menu
- Calculate and set dynamic max height for RoleStatusEditor dropdown menu based on available viewport space
---
 src/DTableSelect/index.js      |  5 ++++-
 src/RoleStatusEditor/index.css |  1 +
 src/RoleStatusEditor/index.js  | 18 ++++++++++++++++--
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/DTableSelect/index.js b/src/DTableSelect/index.js
index 357b439e..06fec58b 100644
--- a/src/DTableSelect/index.js
+++ b/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}
diff --git a/src/RoleStatusEditor/index.css b/src/RoleStatusEditor/index.css
index 85211f58..9fa21f9c 100644
--- a/src/RoleStatusEditor/index.css
+++ b/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 {
diff --git a/src/RoleStatusEditor/index.js b/src/RoleStatusEditor/index.js
index 17111381..5ab8b12e 100644
--- a/src/RoleStatusEditor/index.js
+++ b/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,7 +42,7 @@ 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 })} />
@@ -37,6 +50,7 @@ const RoleStatusEditor = ({ isShowDropdownIcon, currentOption, menuOptions, onCh
       </DropdownToggle>
       <DropdownMenu
         className="position-fixed"
+        style={{ maxHeight: menuMaxHeight }}
         modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
       >
         {menuOptions.map(option => {