Merge pull request #7560 from haiwen/fix/column_dropdown_menu

fix column type dropdown menu

frontend/src/metadata/components/popover/column-popover/dropdown-menu/index.css

@@ -0,0 +1,30 @@
+.search-column-container {
+  padding: 8px 16px;
+}
+
+.search-column-container .form-control {
+  height: 2rem;
+}
+
+.column-type-item.active {
+  background: #20a0ff;
+}
+
+.column-type-item.active .sf-metadata-icon {
+  fill: #fff;
+}
+
+.column-type-item:not(.active):hover {
+  color: #212529;
+  background-color: #f5f5f5;
+}
+
+.column-type-item:hover .sf3-font-down {
+  color: #666;
+}
+
+.column-type-item .sf-metadata-icon {
+  fill: #aaa;
+  margin-right: 8px;
+  flex-shrink: 0;
+}

frontend/src/metadata/components/popover/column-popover/dropdown-menu/index.js

@@ -2,10 +2,13 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Input } from 'reactstrap';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import Icon from '../../../../components/icon';
-import { gettext } from '../../../../utils/constants';
-import { CellType, COLUMNS_ICON_CONFIG, DEFAULT_DATE_FORMAT, DEFAULT_RATE_DATA, DEFAULT_SHOOTING_TIME_FORMAT, PRIVATE_COLUMN_KEY } from '../../../constants';
-import { getColumnDisplayName } from '../../../utils/column';
+import Icon from '../../../../../components/icon';
+import { gettext } from '../../../../../utils/constants';
+import { CellType, COLUMNS_ICON_CONFIG, DEFAULT_DATE_FORMAT, DEFAULT_RATE_DATA, DEFAULT_SHOOTING_TIME_FORMAT, PRIVATE_COLUMN_KEY } from '../../../../constants';
+import { getColumnDisplayName } from '../../../../utils/column';
+import ModalPortal from '../../../../../components/modal-portal';
+
+import './index.css';
 
 const COLUMNS = [
   {
@@ -186,60 +189,62 @@ const CustomDropdownMenu = ({ column, modifiers, onSelect }) => {
   }, [onSelect]);
 
   return (
-    <DropdownMenu modifiers={modifiers}>
-      <div className="search-column-container">
-        <Input onChange={onSearchColumn} placeholder={gettext('Search properties')} value={searchValue} onClick={onSearchClick} ref={inputRef} />
-      </div>
-      {displayColumns.length > 0 && predefinedColumns.length > 0 && (
-        <>
-          {predefinedColumns.map(item => (
-            <DropdownItem
-              key={item.key}
-              className={classnames('column-type-item text-truncate', { 'active': item.key === column?.key })}
-              onMouseEnter={() => setCustomPropertiesOpen(false)}
-              onClick={() => handleSelect(item)}
-            >
-              <Icon symbol={item.icon} className="sf-metadata-icon" />
-              <span>{item.name}</span>
-            </DropdownItem>
-          ))}
-          {basicsColumns.length > 0 && (
-            <>
-              <DropdownItem className="w-100" divider />
-              <Dropdown
-                className="w-100"
-                direction="end"
-                isOpen={isCustomPropertiesOpen}
-                toggle={toggleCustomProperties}
-                onMouseEnter={() => setCustomPropertiesOpen(true)}
-                onMouseMove={(e) => {e.stopPropagation();}}
+    <ModalPortal>
+      <DropdownMenu className="sf-metadata-column-type-dropdown-menu" modifiers={modifiers}>
+        <div className="search-column-container">
+          <Input onChange={onSearchColumn} placeholder={gettext('Search properties')} value={searchValue} onClick={onSearchClick} ref={inputRef} />
+        </div>
+        {displayColumns.length > 0 && predefinedColumns.length > 0 && (
+          <>
+            {predefinedColumns.map(item => (
+              <DropdownItem
+                key={item.key}
+                className={classnames('column-type-item text-truncate', { 'active': item.key === column?.key })}
+                onMouseEnter={() => setCustomPropertiesOpen(false)}
+                onClick={() => handleSelect(item)}
               >
-                <DropdownToggle
-                  tag='span'
-                  className="column-type-item dropdown-item text-truncate"
+                <Icon symbol={item.icon} className="sf-metadata-icon" />
+                <span>{item.name}</span>
+              </DropdownItem>
+            ))}
+            {basicsColumns.length > 0 && (
+              <>
+                <DropdownItem className="w-100" divider />
+                <Dropdown
+                  className="w-100"
+                  direction="end"
+                  isOpen={isCustomPropertiesOpen}
+                  toggle={toggleCustomProperties}
+                  onMouseEnter={() => setCustomPropertiesOpen(true)}
+                  onMouseMove={(e) => {e.stopPropagation();}}
                 >
-                  <Icon symbol="edit" className="sf-metadata-icon" />
-                  <span className="mr-auto">{gettext('Custom properties')}</span>
-                  <i className="sf3-font-down sf3-font rotate-270"></i>
-                </DropdownToggle>
-                <DropdownMenu>
-                  {basicsColumns.map((item, index) => (
-                    <DropdownItem
-                      key={index}
-                      className={classnames('column-type-item text-truncate', { 'active': item.key === column?.key })}
-                      onClick={() => handleSelect(item)}
-                    >
-                      <Icon symbol={item.icon} className="sf-metadata-icon" />
-                      <span>{item.name}</span>
-                    </DropdownItem>
-                  ))}
-                </DropdownMenu>
-              </Dropdown>
-            </>
-          )}
-        </>
-      )}
-    </DropdownMenu>
+                  <DropdownToggle
+                    tag='span'
+                    className="column-type-item dropdown-item text-truncate d-flex align-items-center"
+                  >
+                    <Icon symbol="edit" className="sf-metadata-icon" />
+                    <span className="mr-auto">{gettext('Custom properties')}</span>
+                    <i className="sf3-font-down sf3-font rotate-270"></i>
+                  </DropdownToggle>
+                  <DropdownMenu container="body" style={{ zIndex: 1061 }}>
+                    {basicsColumns.map((item, index) => (
+                      <DropdownItem
+                        key={index}
+                        className={classnames('column-type-item text-truncate', { 'active': item.key === column?.key })}
+                        onClick={() => handleSelect(item)}
+                      >
+                        <Icon symbol={item.icon} className="sf-metadata-icon" />
+                        <span>{item.name}</span>
+                      </DropdownItem>
+                    ))}
+                  </DropdownMenu>
+                </Dropdown>
+              </>
+            )}
+          </>
+        )}
+      </DropdownMenu>
+    </ModalPortal>
   );
 };
 

frontend/src/metadata/components/popover/column-popover/type/index.css

@@ -1,45 +1,3 @@
 .sf-metadata-column-type .dropdown-menu {
   filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
 }
-
-.sf-metadata-column-type .search-column-container {
-  padding: 8px 16px;
-}
-
-.sf-metadata-column-type .search-column-container .form-control {
-  height: 2rem;
-}
-
-.sf-metadata-column-type .column-type-item {
-  color: #212529;
-  cursor: pointer;
-  padding: 3px 16px;
-  width: 100%;
-  height: 30px;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-}
-
-.sf-metadata-column-type .column-type-item.active {
-  color: #fff;
-  background: #20a0ff;
-}
-
-.sf-metadata-column-type .column-type-item.active .sf-metadata-icon {
-  fill: #fff;
-}
-
-.sf-metadata-column-type .column-type-item:not(.active):hover {
-  background-color: #f5f5f5;
-}
-
-.sf-metadata-column-type .column-type-item:hover .sf3-font-down {
-  color: #666;
-}
-
-.sf-metadata-column-type .column-type-item .sf-metadata-icon {
-  fill: #aaa;
-  margin-right: 8px;
-  flex-shrink: 0;
-}

frontend/src/metadata/components/popover/column-popover/type/index.js

@@ -4,7 +4,7 @@ import Icon from '@/components/icon';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { gettext } from '../../../../../utils/constants';
-import CustomDropdownMenu from '../custom-dropdown-menu';
+import CustomDropdownMenu from '../dropdown-menu';
 
 import './index.css';
 

frontend/src/metadata/views/table/table-main/records-header/insert-column/index.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import ColumnPopover from '../../../../../components/popover/column-popover';
 import Icon from '../../../../../../components/icon';
 import { getEventClassName } from '../../../../../../utils/dom';
-import CustomDropdownMenu from '../../../../../components/popover/column-popover/custom-dropdown-menu';
+import CustomDropdownMenu from '../../../../../components/popover/column-popover/dropdown-menu';
 
 import './index.css';
 
@@ -26,7 +26,6 @@ const InsertColumn = ({ lastColumn, height, groupOffsetLeft, insertColumn: inser
     };
   }, [lastColumn, height, groupOffsetLeft]);
 
-
   const toggleAddColumn = useCallback(() => {
     setColumnMenuOpen(!isColumnMenuOpen);
   }, [isColumnMenuOpen]);
@@ -54,7 +53,9 @@ const InsertColumn = ({ lastColumn, height, groupOffsetLeft, insertColumn: inser
     const className = getEventClassName(event);
     if (className.indexOf('column-type-item') > -1) return;
     const popover = document.querySelector('.sf-metadata-column-popover');
-    if ((popover && popover.contains(event.target))) return;
+    if (popover && popover.contains(event.target)) return;
+    const dropdownMenu = document.querySelector('.sf-metadata-column-type-dropdown-menu');
+    if (dropdownMenu && event.target.closest('.sf-metadata-column-type-dropdown-menu')) return;
     setColumnPopoverShow(false);
   }, [isColumnPopoverShow]);