diff --git a/frontend/src/components/common/select/seahub-select.js b/frontend/src/components/common/select/seahub-select.js
index 3a9e061c3f..e377f4ae3b 100644
--- a/frontend/src/components/common/select/seahub-select.js
+++ b/frontend/src/components/common/select/seahub-select.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Select, { components, createFilter } from 'react-select';
+import Select, { components } from 'react-select';
 import { MenuSelectStyle } from './seahub-select-style';
 
 const ClearIndicator = ({ innerProps, ...props }) => {
@@ -64,8 +64,8 @@ export default class SeahubSelect extends React.Component {
     options: [],
     value: {},
     isDisabled: false,
-    isSearchable: false,
-    isClearable: false,
+    isSearchable: true,
+    isClearable: true,
     placeholder: '',
     isMulti: false,
     menuPortalTarget: '.modal',
@@ -94,10 +94,6 @@ export default class SeahubSelect extends React.Component {
         classNamePrefix={classNamePrefix}
         styles={MenuSelectStyle}
         components={{ Option, MenuList, ClearIndicator }}
-        filterOption={createFilter({
-          matchFrom: 'any',
-          stringify: option => `${option.data.labelValue}`,
-        })}
         placeholder={placeholder}
         isSearchable={isSearchable}
         isClearable={isClearable}
diff --git a/frontend/src/components/dialog/add-wiki-dialog.js b/frontend/src/components/dialog/add-wiki-dialog.js
index c8b1321023..8cf7ec7e7d 100644
--- a/frontend/src/components/dialog/add-wiki-dialog.js
+++ b/frontend/src/components/dialog/add-wiki-dialog.js
@@ -5,7 +5,7 @@ import { gettext, isPro } from '../../utils/constants';
 import wikiAPI from '../../utils/wiki-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
-import { SeahubSelect, NoOptionsStyle } from '../common/select';
+import { SeahubSelect } from '../common/select';
 
 const propTypes = {
   toggleCancel: PropTypes.func.isRequired,
@@ -96,9 +96,6 @@ class AddWikiDialog extends React.Component {
                 placeholder={gettext('Select a department')}
                 maxMenuHeight={200}
                 value={this.state.selectedOption}
-                components={{ NoOptionsMessage: (
-                  <div style={NoOptionsStyle}>{gettext('No department')}</div>
-                ) }}
                 noOptionsMessage={() => {return gettext('No options available');}}
               />
             </>
diff --git a/frontend/src/components/dialog/convert-wiki-dialog.js b/frontend/src/components/dialog/convert-wiki-dialog.js
index 1efd83263f..7c0e748a25 100644
--- a/frontend/src/components/dialog/convert-wiki-dialog.js
+++ b/frontend/src/components/dialog/convert-wiki-dialog.js
@@ -5,7 +5,7 @@ import { gettext, isPro } from '../../utils/constants';
 import wikiAPI from '../../utils/wiki-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
-import { SeahubSelect, NoOptionsStyle } from '../common/select';
+import { SeahubSelect } from '../common/select';
 
 const propTypes = {
   toggleCancel: PropTypes.func.isRequired,
@@ -92,9 +92,6 @@ class ConvertWikiDialog extends React.Component {
                 placeholder={gettext('Select a department')}
                 maxMenuHeight={200}
                 value={this.state.selectedOption}
-                components={{ NoOptionsMessage: (
-                  <div style={NoOptionsStyle}>{gettext('No department')}</div>
-                ) }}
                 noOptionsMessage={() => {return gettext('No options available');}}
               />
             </>
diff --git a/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js b/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js
index 32dc45ca14..5b4dbbe0cc 100644
--- a/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js
+++ b/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js
@@ -302,7 +302,7 @@ class LibSubFolderSetGroupPermissionDialog extends React.Component {
                   placeholder={gettext('Select a group')}
                   maxMenuHeight={200}
                   value={this.state.selectedOption}
-                  components={{ NoOptionsMessage: NoGroupMessage }}
+                  noOptionsMessage={NoGroupMessage}
                 />
               </td>
               {showPath &&
diff --git a/frontend/src/components/dialog/share-to-group.js b/frontend/src/components/dialog/share-to-group.js
index 5868706ed6..e84ecd65d5 100644
--- a/frontend/src/components/dialog/share-to-group.js
+++ b/frontend/src/components/dialog/share-to-group.js
@@ -353,7 +353,9 @@ class ShareToGroup extends React.Component {
                   placeholder={gettext('Select groups')}
                   maxMenuHeight={200}
                   value={this.state.selectedOption}
-                  components={{ NoOptionsMessage: NoGroupMessage }}
+                  noOptionsMessage={NoGroupMessage}
+                  isSearchable={true}
+                  isClearable={true}
                 />
               </td>
               <td>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-group.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-group.js
index 34f99498b9..9711b3f63d 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-group.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-group.js
@@ -253,7 +253,7 @@ class SysAdminShareToGroup extends React.Component {
                   placeholder={gettext('Select groups')}
                   maxMenuHeight={200}
                   value={this.state.selectedOption}
-                  components={{ NoOptionsMessage: NoGroupMessage }}
+                  noOptionsMessage={NoGroupMessage}
                 />
               </td>
               <td>