fix ui

src/AsyncUserSelect/index.css

@@ -29,10 +29,15 @@
   height: 12px;
 }
 
-.dtable-ui-user-select-popover .popover {
-  width: 385px;
+.dtable-ui-user-select-popover {
+  z-index: 1060;
+  width: 385px !important;
   max-width: 385px;
   margin-top: -4px;
+  background-color: var(--bs-popover-bg);
+  box-shadow: var(--bs-border-secondary-shadow);
+  border: 1px solid var(--bs-border-secondary-color);
+  border-radius: 4px;
 }
 
 .dtable-ui-user-select-container {
@@ -58,6 +63,10 @@
   border-radius: 4px;
 }
 
+.dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container .dtable-ui-user-item {
+  background: none !important;
+}
+
 .dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container:hover,
 .dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container-highlight {
   background-color: var(--bs-btn-background-hover);

src/AsyncUserSelect/index.js

@@ -1,8 +1,7 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Popover } from 'reactstrap';
-import ClickOutside from '../ClickOutside';
+import ModalPortal from '../ModalPortal';
 import DTableCustomizeSearchInput from '../DTableCustomizeSearchInput';
 import UserItem from './user-item';
 import { getLocale } from '../lang';
@@ -18,6 +17,7 @@ const AsyncUserSelect = ({ className, emptyPlaceholder = '', searchPlaceholder =
   const [highlightIndex, setHighlightIndex] = useState(-1);
   const [maxItemNum, setMaxItemNum] = useState(0);
   const [itemHeight, setItemHeight] = useState(0);
+  const [popoverPosition, setPopoverPosition] = useState(null);
 
   const selectorRef = useRef(null);
   const userSelectContainerRef = useRef(null);
@@ -30,13 +30,6 @@ const AsyncUserSelect = ({ className, emptyPlaceholder = '', searchPlaceholder =
     setHighlightIndex(-1);
   }, []);
 
-  const onClickOutside = useCallback((e) => {
-    if (isPopoverOpen && (!selectorRef.current || !selectorRef.current.contains(e.target))) {
-      setIsPopoverOpen(false);
-      clearStatus();
-    }
-  }, [isPopoverOpen, clearStatus]);
-
   const searchUsers = useCallback((searchValue = '') => {
     const trimmedSearchValue = searchValue?.trim() || '';
     if (!trimmedSearchValue) {
@@ -165,21 +158,14 @@ const AsyncUserSelect = ({ className, emptyPlaceholder = '', searchPlaceholder =
   }, [onEnter, onUpArrow, onDownArrow, onEsc]);
 
   useEffect(() => {
-    if (userSelectContainerRef.current) {
-      const { bottom } = userSelectContainerRef.current.getBoundingClientRect();
-      if (bottom > window.innerHeight) {
-        userSelectContainerRef.current.style.top = `${window.innerHeight - bottom}px`;
-      }
-    }
+    if (!isPopoverOpen) return;
     if (userListContainerRef.current && userItemContainerRef.current) {
-      const userContainerStyle = getComputedStyle(userListContainerRef.current, null);
-      const userItemStyle = getComputedStyle(userItemContainerRef.current, null);
-      const userItemHeight = parseInt(userItemStyle.height);
-      const maxContainerItemNum = Math.floor(parseInt(userContainerStyle.maxHeight) / userItemHeight);
-      setMaxItemNum(maxContainerItemNum);
+      const userItemHeight = userItemContainerRef.current.getBoundingClientRect().height;
+      const listMaxHeight = userListContainerRef.current.clientHeight;
       setItemHeight(userItemHeight);
+      setMaxItemNum(Math.max(1, Math.floor(listMaxHeight / userItemHeight)));
     }
-  }, []);
+  }, [isPopoverOpen, searchedUsers]);
 
   useEffect(() => {
     document.addEventListener('keydown', onHotKey, true);
@@ -188,80 +174,117 @@ const AsyncUserSelect = ({ className, emptyPlaceholder = '', searchPlaceholder =
     };
   }, [onHotKey]);
 
+  useEffect(() => {
+    if (!isPopoverOpen) return;
+    const isInside = (target) => {
+      if (!target) return false;
+      if (selectorRef.current && selectorRef.current.contains(target)) return true;
+      if (userSelectContainerRef.current && userSelectContainerRef.current.contains(target)) return true;
+      return false;
+    };
+    const handleDocumentMouseDown = (e) => {
+      if (isInside(e.target)) return;
+      setIsPopoverOpen(false);
+      clearStatus();
+    };
+    document.addEventListener('mousedown', handleDocumentMouseDown, true);
+    return () => {
+      document.removeEventListener('mousedown', handleDocumentMouseDown, true);
+    };
+  }, [isPopoverOpen, clearStatus]);
+
+  const getSelectorRect = () => {
+    if (!selectorRef.current) return null;
+    return selectorRef.current.getBoundingClientRect();
+  };
+
+  useLayoutEffect(() => {
+    if (!isPopoverOpen) {
+      setPopoverPosition(null);
+      return;
+    }
+    const rect = getSelectorRect();
+    if (!rect) return;
+    setPopoverPosition({
+      position: 'fixed',
+      top: rect.bottom + 8,
+      left: rect.left,
+      width: rect.width,
+    });
+  }, [isPopoverOpen, selectedUsers]);
+
+  const popoverStyle = popoverPosition;
+
   return (
-    <ClickOutside onClickOutside={onClickOutside}>
-      <>
-        <div className={classnames('dtable-ui-selected-users-container form-control d-flex align-items-center', className, { 'focus': isPopoverOpen })} onClick={onTogglePopover} ref={selectorRef}>
-          <div className='dtable-ui-users-input'>
-            {selectedUsers.map((user, index) => {
-              return (
-                <UserItem
-                  key={`dtable-ui-user-selector-selected-user-${index}`}
-                  user={user}
-                  deleteUser={deselectUser}
-                />
-              );
-            })}
-            {selectedUsers.length === 0 && (
-              <div className="dtable-ui-user-select-placeholder">
-                {emptyPlaceholder || getLocale('Search_users')}
-              </div>
-            )}
-            {!showDeptBtn && <span className="select-dropdown-indicator d-inline-flex align-items-center"><DTableIcon symbol="down" color='var(--bs-icon-color)'/></span>}
-          </div>
+    <>
+      <div className={classnames('dtable-ui-selected-users-container form-control d-flex align-items-center', className, { 'focus': isPopoverOpen })} onClick={onTogglePopover} ref={selectorRef}>
+        <div className='dtable-ui-users-input'>
+          {selectedUsers.map((user, index) => {
+            return (
+              <UserItem
+                key={`dtable-ui-user-selector-selected-user-${index}`}
+                user={user}
+                deleteUser={deselectUser}
+              />
+            );
+          })}
+          {selectedUsers.length === 0 && (
+            <div className="dtable-ui-user-select-placeholder">
+              {emptyPlaceholder || getLocale('Search_users')}
+            </div>
+          )}
+          {!showDeptBtn && <span className="select-dropdown-indicator d-inline-flex align-items-center"><DTableIcon symbol="down" color='var(--bs-icon-color)'/></span>}
         </div>
-        {selectorRef.current && (
-          <Popover
-            placement="bottom-start"
-            isOpen={isPopoverOpen}
-            target={selectorRef.current}
-            hideArrow={true}
-            fade={false}
-            className="dtable-ui-user-select-popover"
+      </div>
+      {isPopoverOpen && popoverStyle && (
+        <ModalPortal>
+          <div
+            className="dtable-ui-user-select-popover dtable-ui-user-select-container"
+            ref={userSelectContainerRef}
+            style={popoverStyle}
+            onMouseDown={e => e.stopPropagation()}
           >
-            <div className="dtable-ui-user-select-container" ref={userSelectContainerRef} onMouseDown={e => e.stopPropagation()}>
-              <div className="seatable-select-search">
-                <DTableCustomizeSearchInput
-                  className="option-search-control"
-                  placeholder={searchPlaceholder || getLocale('Search_users')}
-                  onChange={onSearchValueChanged}
-                  clearValue={() => onSearchValueChanged('')}
-                  autoFocus={true}
-                  isClearable={true}
-                  value={searchValue}
-                />
-              </div>
-              <div className="dtable-ui-user-list-container" ref={userListContainerRef}>
-                {searchedUsers.length > 0 && (
-                  searchedUsers.map((user, index) => {
-                    return (
-                      <div
-                        key={user.email}
-                        className={classnames('dtable-ui-user-item-container', { 'dtable-ui-user-item-container-highlight': index === highlightIndex })}
-                        ref={userItemContainerRef}
-                        onClick={() => onUserClick(user)}
-                      >
-                        <UserItem key={`dtable-ui-user-selector-searched-user-${index}`} user={user} enableShowIDInOrgWhenSearchUser={enableShowIDInOrgWhenSearchUser} />
-                        {selectedUsers.find(u => u.email === user.email) && (
-                          <div className='dtable-ui-collaborator-check-icon'>
-                            <i className="dtable-font dtable-icon-check" aria-hidden="true"></i>
-                          </div>
-                        )}
-                      </div>
-                    );
-                  })
-                )}
-                {searchedUsers.length === 0 &&
-                  <div className="no-user-search-result">
-                    {searchValue ? getLocale('User_not_found') : getLocale('Enter_characters_to_start_searching')}
-                  </div>
-                }
-              </div>
+            <div className="seatable-select-search">
+              <DTableCustomizeSearchInput
+                className="option-search-control"
+                placeholder={searchPlaceholder || getLocale('Search_users')}
+                onChange={onSearchValueChanged}
+                clearValue={() => onSearchValueChanged('')}
+                autoFocus={true}
+                isClearable={true}
+                value={searchValue}
+              />
+            </div>
+            <div className="dtable-ui-user-list-container" ref={userListContainerRef}>
+              {searchedUsers.length > 0 && (
+                searchedUsers.map((user, index) => {
+                  return (
+                    <div
+                      key={user.email}
+                      className={classnames('dtable-ui-user-item-container', { 'dtable-ui-user-item-container-highlight': index === highlightIndex })}
+                      ref={index === 0 ? userItemContainerRef : null}
+                      onClick={() => onUserClick(user)}
+                    >
+                      <UserItem key={`dtable-ui-user-selector-searched-user-${index}`} user={user} enableShowIDInOrgWhenSearchUser={enableShowIDInOrgWhenSearchUser} />
+                      {selectedUsers.find(u => u.email === user.email) && (
+                        <div className='dtable-ui-collaborator-check-icon'>
+                          <i className="dtable-font dtable-icon-check" aria-hidden="true"></i>
+                        </div>
+                      )}
+                    </div>
+                  );
+                })
+              )}
+              {searchedUsers.length === 0 && (
+                <div className="no-user-search-result">
+                  {searchValue ? getLocale('User_not_found') : getLocale('Enter_characters_to_start_searching')}
+                </div>
+              )}
             </div>
-          </Popover>
-        )}
-      </>
-    </ClickOutside>
+          </div>
+        </ModalPortal>
+      )}
+    </>
   );
 };
 

src/DTableCustomizeSearchInput/index.css

@@ -28,6 +28,18 @@
   border-top-right-radius: 4px;
 }
 
+.select-search-control:-webkit-autofill,
+.select-search-control:-webkit-autofill:hover,
+.select-search-control:-webkit-autofill:focus,
+.select-search-control:-webkit-autofill:active,
+.select-search-control:-internal-autofill-previewed,
+.select-search-control:-internal-autofill-selected {
+  -webkit-box-shadow: inset 0 0 0 1000px var(--bs-popover-bg) !important;
+  box-shadow: inset 0 0 0 1000px var(--bs-popover-bg) !important;
+  -webkit-text-fill-color: var(--bs-body-color) !important;
+  transition: background-color 5000s ease-in-out 0s !important;
+}
+
 .select-search-control:focus {
   outline: none;
   box-shadow: none;
@@ -70,6 +82,6 @@
 
 .dtable-ui-user-select-popover .select-search-control,
 .dtable-popover .select-search-control {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
 }

src/DTableCustomizeSelect/index.css

@@ -107,10 +107,6 @@
   white-space: nowrap;
 }
 
-.seatable-customize-select .selected-option .multicolor-icon {
-  font-size: 12px;
-}
-
 .seatable-customize-select .multiple-check-icon,
 .seatable-customize-select .header-icon .dtable-font,
 .seatable-option-group .select-label .header-icon .dtable-font {
@@ -125,6 +121,12 @@
   margin-left: 0 !important;
 }
 
+.seatable-customize-select .selected-option .dtable-icon-down3,
+.seatable-customize-select .selected-option .multicolor-icon {
+  color: var(--bs-icon-color) !important;
+  font-size: 12px;
+}
+
 .selector-group-select .selected-option-show .selected-option-item {
   align-items: center;
   border-radius: 4px;
@@ -159,7 +161,9 @@
 }
 
 .selector-group-select {
-  padding: 7px 16px 7px 8px;
+  height: auto;
+  min-height: 38px;
+  padding: 6px 16px 6px 8px;
 }
 
 .selector-group-select .selected-option {
@@ -172,7 +176,3 @@
   height: auto;
   min-height: 24px
 }
-
-.selector-group-select {
-  height: auto;
-}

src/DTableCustomizeSelect/index.js

@@ -46,6 +46,22 @@ class DTableCustomizeSelect extends Component {
     this.setState({ isShowSelectOptions: false });
   };
 
+  handleDocumentMouseDown = (event) => {
+    if (!this.state.isShowSelectOptions) return;
+    const target = event.target;
+    if (this.selector && this.selector.contains(target)) return;
+    if (target && target.closest && target.closest('.seatable-option-group')) return;
+    this.closeSelect();
+  };
+
+  componentDidMount() {
+    document.addEventListener('mousedown', this.handleDocumentMouseDown, true);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleDocumentMouseDown, true);
+  }
+
   getSelectedOptionTop = () => {
     if (!this.selector) return 38;
     const { height } = this.selector.getBoundingClientRect();