[select-editor] improved it

frontend/src/components/select-editor/select-editor.js

@@ -58,7 +58,7 @@ class SelectEditor extends React.Component {
         value: gettext('Add custom permission'),
         isDisabled: true,
         label: (
-          <div className="btn-add-custom-permission" onClick={this.props.onAddCustomPermissionToggle}>
+          <div className="permission-editor-btn-add-custom-permission" onClick={this.props.onAddCustomPermissionToggle}>
             <i className="fa fa-plus"></i>
             <span>{gettext('Add custom permission')}</span>
           </div>
@@ -108,6 +108,28 @@ class SelectEditor extends React.Component {
   render() {
     let { currentOption, isTextMode } = this.props;
 
+    const MenuSelectStyle = {
+      option: (provided, state) => {
+        const { isDisabled, isSelected, isFocused } = state;
+        return ({
+          ...provided,
+          cursor: isDisabled ? 'default' : 'pointer',
+          //backgroundColor: isSelected ? '#5A98F8' : (isFocused ? '#f5f5f5' : '#fff'),
+          '.header-icon .dtable-font': {
+            color: isSelected ? '#fff' : '#aaa',
+          },
+        });
+      },
+      control: (provided) => ({
+        ...provided,
+        fontSize: '14px',
+        cursor: 'pointer',
+        lineHeight: '1.5',
+      }),
+      menuPortal:  base => ({ ...base, zIndex: 9999 }),
+      indicatorSeparator: () => {},
+    };
+
     // scence1: isTextMode (text)editor-icon --> select
     // scence2: !isTextMode select
     return (
@@ -121,6 +143,11 @@ class SelectEditor extends React.Component {
             value={currentOption}
             onChange={this.onOptionChanged}
             captureMenuScroll={false}
+            menuPlacement="auto"
+            menuPosition={'fixed'}
+            menuPortalTarget={document.querySelector('#wrapper')}
+            styles={MenuSelectStyle}
+            menuShouldScrollIntoView
           />
         }
         {(isTextMode && !this.state.isEditing) &&

frontend/src/css/select-editor.css

@@ -1,4 +1,4 @@
-.permission-editor .permission-editor-explanation {
+.permission-editor-explanation {
   user-select: none;
   padding-left: 10px;
   color: #9c9c9c;
@@ -32,17 +32,17 @@
   padding: 0 0.5rem;
 }
 
-.permission-editor .permission-editor__menu .permission-editor__option--is-disabled {
+.permission-editor__menu .permission-editor__option--is-disabled {
   color: #9c9c9c;
   border-top: 1px solid #dedede;
 }
 
-.permission-editor .permission-editor__menu .permission-editor__option--is-disabled:hover {
+.permission-editor__menu .permission-editor__option--is-disabled:hover {
   background-color: #f0f0f0 !important;
   color: #9c9c9c !important;
 }
 
-.permission-editor .btn-add-custom-permission {
+.permission-editor-btn-add-custom-permission {
   display: flex;
   align-items: center;
   padding: .5rem 0;
@@ -50,7 +50,7 @@
   line-height: 13px;
 }
 
-.permission-editor .btn-add-custom-permission .fa {
+.permission-editor-btn-add-custom-permission .fa {
   font-size: 12px;
   line-height: 13px;
   margin-right: .25rem;