diff --git a/frontend/src/components/dialog/change-repo-password-dialog.js b/frontend/src/components/dialog/change-repo-password-dialog.js
index aa4a91472e..bfd03fe655 100644
--- a/frontend/src/components/dialog/change-repo-password-dialog.js
+++ b/frontend/src/components/dialog/change-repo-password-dialog.js
@@ -96,7 +96,7 @@ class ChangeRepoPasswordDialog extends React.Component {
     const { repoName, toggleDialog } = this.props;
 
     return (
-      <Modal isOpen={true} centered={true} style={{height: 'auto'}}>
+      <Modal isOpen={true} style={{height: 'auto'}} toggle={toggleDialog}>
         <ModalHeader toggle={toggleDialog}>
           <span>
             {Utils.generateDialogTitle(gettext('Change Password of Library {placeholder}'), repoName)}
diff --git a/frontend/src/components/dialog/copy-move-dirent-progress-dialog.js b/frontend/src/components/dialog/copy-move-dirent-progress-dialog.js
index e35199635b..3bba4aa167 100644
--- a/frontend/src/components/dialog/copy-move-dirent-progress-dialog.js
+++ b/frontend/src/components/dialog/copy-move-dirent-progress-dialog.js
@@ -23,7 +23,7 @@ class CopyMoveDirentProgressDialog extends React.Component {
       textAlign: 'left',
     };
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.props.toggleDialog}>{title}</ModalHeader>
         <ModalBody style={{minHeight: '80px'}}>
           <div className="progress" style={{height: '40px'}}>
diff --git a/frontend/src/components/dialog/lib-decrypt-dialog.js b/frontend/src/components/dialog/lib-decrypt-dialog.js
index fd01139617..19034f5d13 100644
--- a/frontend/src/components/dialog/lib-decrypt-dialog.js
+++ b/frontend/src/components/dialog/lib-decrypt-dialog.js
@@ -54,7 +54,7 @@ class LibDecryptDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.toggle}>
         <ModalBody>
           <button type="button" className="close" onClick={this.toggle}><span aria-hidden="true">×</span></button>
           <Form className="lib-decrypt-form text-center">
diff --git a/frontend/src/components/dialog/lib-history-setting-dialog.js b/frontend/src/components/dialog/lib-history-setting-dialog.js
index 2361a50371..2ae9a5b026 100644
--- a/frontend/src/components/dialog/lib-history-setting-dialog.js
+++ b/frontend/src/components/dialog/lib-history-setting-dialog.js
@@ -110,7 +110,7 @@ class LibHistorySetting extends React.Component {
   render() {
     const itemName = this.props.itemName;
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.props.toggleDialog}>
           <span className="op-target" title={itemName}>{itemName}</span>{' '}
           {gettext('History Setting')}
diff --git a/frontend/src/components/dialog/lib-old-files-auto-del-dialog.js b/frontend/src/components/dialog/lib-old-files-auto-del-dialog.js
index 3ba5c93937..12aab81f16 100644
--- a/frontend/src/components/dialog/lib-old-files-auto-del-dialog.js
+++ b/frontend/src/components/dialog/lib-old-files-auto-del-dialog.js
@@ -93,7 +93,7 @@ class LibOldFilesAutoDelDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.props.toggleDialog}>
           {gettext('Auto deletion')}
         </ModalHeader>
diff --git a/frontend/src/components/dialog/list-created-files-dialog.js b/frontend/src/components/dialog/list-created-files-dialog.js
index 2fa98a6f63..b08f718241 100644
--- a/frontend/src/components/dialog/list-created-files-dialog.js
+++ b/frontend/src/components/dialog/list-created-files-dialog.js
@@ -19,7 +19,7 @@ class ListCreatedFileDialog extends React.Component {
   render() {
     let activity = this.props.activity;
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}>{gettext('Created Files')}</ModalHeader>
         <ModalBody>
           <Table>
diff --git a/frontend/src/components/dialog/list-repo-drafts-dialog.js b/frontend/src/components/dialog/list-repo-drafts-dialog.js
index f251b71098..ee0f39900f 100644
--- a/frontend/src/components/dialog/list-repo-drafts-dialog.js
+++ b/frontend/src/components/dialog/list-repo-drafts-dialog.js
@@ -57,7 +57,7 @@ class ListRepoDraftsDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}>{gettext('Drafts')}</ModalHeader>
         <ModalBody className="dialog-list-container">
           <table>
diff --git a/frontend/src/components/dialog/new-wiki-dialog.js b/frontend/src/components/dialog/new-wiki-dialog.js
index d8fb431394..2daf50f442 100644
--- a/frontend/src/components/dialog/new-wiki-dialog.js
+++ b/frontend/src/components/dialog/new-wiki-dialog.js
@@ -50,7 +50,7 @@ class NewWikiDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true} autoFocus={false}>
+      <Modal isOpen={true} autoFocus={false} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}>{gettext('New Wiki')}</ModalHeader>
         <ModalBody>
           <label className="form-label">{gettext('Name')}</label>
diff --git a/frontend/src/components/dialog/org-admin-invite-user-dialog.js b/frontend/src/components/dialog/org-admin-invite-user-dialog.js
index e01b4e4cff..f033560e6d 100644
--- a/frontend/src/components/dialog/org-admin-invite-user-dialog.js
+++ b/frontend/src/components/dialog/org-admin-invite-user-dialog.js
@@ -27,7 +27,7 @@ class InviteUserDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.props.toggle}>
         <ModalHeader toggle={this.props.toggle}>{gettext('Invite user')}</ModalHeader>
         <ModalBody>
           <p>{gettext('Send the invitation link to the others, and they will be able to join the organization via scanning the QR code.')}</p>
diff --git a/frontend/src/components/dialog/reset-encrypted-repo-password-dialog.js b/frontend/src/components/dialog/reset-encrypted-repo-password-dialog.js
index 48976a71ec..1328129c27 100644
--- a/frontend/src/components/dialog/reset-encrypted-repo-password-dialog.js
+++ b/frontend/src/components/dialog/reset-encrypted-repo-password-dialog.js
@@ -42,7 +42,7 @@ class ResetEncryptedRepoPasswordDialog extends React.Component {
     let message = gettext('New password has been sent to your email {mail}. Please check your mailbox. If you don’t receive the password, please check if your email address is properly configured.').replace('{mail}', user_email);
 
     return (
-      <Modal isOpen={true}  centered={true}>
+      <Modal isOpen={true} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.props.toggleDialog}>
           {gettext('Reset library password')}
         </ModalHeader>
diff --git a/frontend/src/components/dialog/save-shared-dir-dialog.js b/frontend/src/components/dialog/save-shared-dir-dialog.js
index d2fdea8937..b5140bf922 100644
--- a/frontend/src/components/dialog/save-shared-dir-dialog.js
+++ b/frontend/src/components/dialog/save-shared-dir-dialog.js
@@ -51,7 +51,7 @@ class SaveSharedDirDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true} className="sf-save-file">
+      <Modal isOpen={true} className="sf-save-file" toggle={this.props.toggleCancel}>
         <ModalHeader toggle={this.props.toggleCancel}>{gettext('Save to:')}</ModalHeader>
         <ModalBody>
           <FileChooser
diff --git a/frontend/src/components/dialog/share-repo-dialog.js b/frontend/src/components/dialog/share-repo-dialog.js
index c4ee9c66a4..828c9cf904 100644
--- a/frontend/src/components/dialog/share-repo-dialog.js
+++ b/frontend/src/components/dialog/share-repo-dialog.js
@@ -117,7 +117,7 @@ class ShareRepoDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}>{gettext('Select libraries to share')}</ModalHeader>
         <ModalBody className="dialog-list-container">
           <table>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-add-member-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-add-member-dialog.js
index c0cab8aa86..1fe87787c0 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-add-member-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-add-member-dialog.js
@@ -35,7 +35,7 @@ class SysAdminGroupAddMemberDialog extends React.Component {
   render() {
     const { isSubmitBtnDisabled } = this.state;
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.props.toggle}>
         <ModalHeader toggle={this.props.toggle}>{gettext('Add Member')}</ModalHeader>
         <ModalBody>
           <UserSelect
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-transfer-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-transfer-dialog.js
index 1747ce1f29..dfc4d25d6c 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-transfer-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-transfer-dialog.js
@@ -39,7 +39,7 @@ class SysAdminTransferGroupDialog extends React.Component {
     const groupName = '<span class="op-target">' + Utils.HTMLescape(this.props.groupName) +'</span>';
     const msg = gettext('Transfer Group {placeholder} to').replace('{placeholder}', groupName);
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.props.toggleDialog}>
           <span dangerouslySetInnerHTML={{__html: msg}}></span>
         </ModalHeader>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog.js
index 4c0c8a00bd..52252d4892 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog.js
@@ -108,7 +108,7 @@ class SysAdminLibHistorySettingDialog extends React.Component {
   render() {
     const itemName = this.props.itemName;
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.props.toggleDialog}>
           <span className="op-target" title={itemName}>{itemName}</span>{' '}
           {gettext('History Setting')}
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-repo-transfer-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-repo-transfer-dialog.js
index 796c298016..8296c4e3a1 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-repo-transfer-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-repo-transfer-dialog.js
@@ -34,7 +34,7 @@ class SysAdminRepoTransferDialog extends React.Component {
     let msg = gettext('Transfer Library {library_name}');
     let message = msg.replace('{library_name}', innerSpan);
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.props.toggle}>
         <ModalHeader toggle={this.props.toggle}>
           <div dangerouslySetInnerHTML={{__html:message}} />
         </ModalHeader>
diff --git a/frontend/src/components/dialog/transfer-dialog.js b/frontend/src/components/dialog/transfer-dialog.js
index b0208281d9..505d5c6b83 100644
--- a/frontend/src/components/dialog/transfer-dialog.js
+++ b/frontend/src/components/dialog/transfer-dialog.js
@@ -66,7 +66,7 @@ class TransferDialog extends React.Component {
       canTransferToDept = this.props.canTransferToDept;
     }
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.props.toggleDialog}>
           <span>{gettext('Transfer Library {library_name}').replace('{library_name}', itemName)}</span>
         </ModalHeader>
diff --git a/frontend/src/components/dialog/wiki-select-dialog.js b/frontend/src/components/dialog/wiki-select-dialog.js
index db34ef1ef8..1a81fa51f8 100644
--- a/frontend/src/components/dialog/wiki-select-dialog.js
+++ b/frontend/src/components/dialog/wiki-select-dialog.js
@@ -67,7 +67,7 @@ class WikiSelectDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}>{gettext('Publish a Library')}</ModalHeader>
         <ModalBody className="dialog-list-container">
           <table>