[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) &&