diff --git a/frontend/src/components/dialog/repo-api-token-dialog.js b/frontend/src/components/dialog/repo-api-token-dialog.js
index 801538859c4..fb4a595d09c 100644
--- a/frontend/src/components/dialog/repo-api-token-dialog.js
+++ b/frontend/src/components/dialog/repo-api-token-dialog.js
@@ -102,11 +102,10 @@ class RepoAPITokenDialog extends React.Component {
       loading: true,
       isSubmitBtnActive: true,
     };
-    this.repo = this.props.repo;
   }
 
   listAPITokens = () => {
-    seafileAPI.listRepoAPITokens(this.repo.repo_id).then((res) => {
+    seafileAPI.listRepoAPITokens(this.props.repo.repo_id).then((res) => {
       this.setState({
         apiTokenList: res.data.repo_api_tokens,
         loading: false,
@@ -150,7 +149,7 @@ class RepoAPITokenDialog extends React.Component {
     });
     const { appName, permission, apiTokenList } = this.state;
 
-    seafileAPI.addRepoAPIToken(this.repo.repo_id, appName, permission).then((res) => {
+    seafileAPI.addRepoAPIToken(this.props.repo.repo_id, appName, permission).then((res) => {
       apiTokenList.push(res.data);
       this.setState({
         apiTokenList: apiTokenList,
@@ -165,7 +164,7 @@ class RepoAPITokenDialog extends React.Component {
   };
 
   deleteAPIToken = (appName) => {
-    seafileAPI.deleteRepoAPIToken(this.repo.repo_id, appName).then((res) => {
+    seafileAPI.deleteRepoAPIToken(this.props.repo.repo_id, appName).then((res) => {
       const apiTokenList = this.state.apiTokenList.filter(item => {
         return item.app_name !== appName;
       });
@@ -178,7 +177,7 @@ class RepoAPITokenDialog extends React.Component {
   };
 
   updateAPIToken = (appName, permission) => {
-    seafileAPI.updateRepoAPIToken(this.repo.repo_id, appName, permission).then((res) => {
+    seafileAPI.updateRepoAPIToken(this.props.repo.repo_id, appName, permission).then((res) => {
       let apiTokenList = this.state.apiTokenList.filter(item => {
         if (item.app_name === appName) {
           item.permission = permission;
@@ -280,9 +279,7 @@ class RepoAPITokenDialog extends React.Component {
   };
 
   render() {
-    let repo = this.repo;
-
-    const itemName = '<span class="op-target text-truncate mr-1">' + Utils.HTMLescape(repo.repo_name) + '</span>';
+    const itemName = '<span class="op-target text-truncate mr-1">' + Utils.HTMLescape(this.props.repo.repo_name) + '</span>';
     const title = gettext('{placeholder} API Token').replace('{placeholder}', itemName);
     return (
       <Modal
diff --git a/frontend/src/components/select-editor/repo-api-token-permission-editor.js b/frontend/src/components/select-editor/repo-api-token-permission-editor.js
index b81202bda80..7d8426ed1bd 100644
--- a/frontend/src/components/select-editor/repo-api-token-permission-editor.js
+++ b/frontend/src/components/select-editor/repo-api-token-permission-editor.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import OpIcon from '../op-icon';
@@ -58,14 +58,16 @@ class RepoAPITokenPermissionEditor extends React.Component {
     return (
       <div onClick={this.onSelectHandler}>
         {(isTextMode && !this.state.isEditing) ?
-          <Fragment>
+          <>
             <span>{optionTranslation}</span>
             {this.props.isEditIconShow &&
               <OpIcon title={gettext('Edit')} className="sf3-font sf3-font-rename attr-action-icon" op={this.onEditPermission} />
             }
-          </Fragment>
+          </>
           :
           <SeahubSelect
+            isSearchable={false}
+            isClearable={false}
             options={this.options}
             placeholder={optionTranslation}
             onChange={this.onPermissionChanged}