Making modals close on ESC and click outside the modal.

krulis-martin · krulis-martin · commit 1cd932066f0c · 2026-01-28T17:30:06.000+01:00
diff --git a/config/webpack.config-dev.js b/config/webpack.config-dev.js
@@ -28,8 +28,8 @@ export default {
   // switch the source map generation when debugging
   // note, we used 'eval-source-map' before, but since webpack 5.100, it breaks the build
   // (causes 'SyntaxError: redeclaration of function normalize')
-  // devtool: 'inline-source-map',
-  devtool: false, // turn it off completely
+  devtool: 'inline-source-map',
+  //devtool: false, // turn it off completely
 
   entry: path.join(__dirname, '..', 'src/client.js'),
   output: {
diff --git a/package.json b/package.json
@@ -28,9 +28,9 @@
   },
   "dependencies": {
     "@babel/plugin-transform-react-inline-elements": "^7.27.1",
-    "@babel/runtime": "^7.28.4",
-    "@formatjs/intl-pluralrules": "^6.0.4",
-    "@formatjs/intl-relativetimeformat": "^12.0.5",
+    "@babel/runtime": "^7.28.6",
+    "@formatjs/intl-pluralrules": "^6.2.1",
+    "@formatjs/intl-relativetimeformat": "^12.2.1",
     "@fortawesome/fontawesome-free": "^7.1.0",
     "@fortawesome/fontawesome-svg-core": "^7.1.0",
     "@fortawesome/free-brands-svg-icons": "^7.1.0",
@@ -40,14 +40,14 @@
     "@iktakahiro/markdown-it-katex": "^4.0.1",
     "@reduxjs/toolkit": "^2.11.2",
     "admin-lte": "4.0.0-rc6",
-    "babel-plugin-formatjs": "^11.0.4",
+    "babel-plugin-formatjs": "^11.2.1",
     "browser-cookies": "^1.2.0",
     "buffer": "^6.0.3",
     "classnames": "^2.5.1",
     "cookie-parser": "^1.4.7",
     "cross-fetch": "^4.1.0",
     "css-loader": "^7.1.2",
-    "ejs": "^3.1.10",
+    "ejs": "^4.0.1",
     "express": "^5.2.1",
     "file-saver": "^2.0.5",
     "flat": "^6.0.1",
@@ -72,11 +72,11 @@
     "react-dropzone": "^14.3.8",
     "react-helmet": "^6.1.0",
     "react-immutable-proptypes": "^2.2.0",
-    "react-intl": "8.0.6",
+    "react-intl": "8.1.1",
     "react-qr-code": "^2.0.18",
     "react-redux": "^9.2.0",
-    "react-router": "^7.12.0",
-    "react-router-dom": "^7.11.0",
+    "react-router": "^7.13.0",
+    "react-router-dom": "^7.13.0",
     "react-syntax-highlighter": "^16.1.0",
     "react-toggle": "4.1.3",
     "redux": "^5.0.1",
@@ -93,20 +93,20 @@
     "viz.js": "^2.1.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.28.3",
-    "@babel/core": "^7.28.5",
-    "@babel/eslint-parser": "^7.28.5",
+    "@babel/cli": "^7.28.6",
+    "@babel/core": "^7.28.6",
+    "@babel/eslint-parser": "^7.28.6",
     "@babel/eslint-plugin": "^7.27.1",
-    "@babel/node": "^7.28.0",
+    "@babel/node": "^7.28.6",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-transform-runtime": "^7.28.5",
-    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-env": "^7.28.6",
     "@babel/preset-react": "^7.28.5",
-    "@babel/register": "^7.28.3",
-    "@eslint/compat": "^2.0.0",
+    "@babel/register": "^7.28.6",
+    "@eslint/compat": "^2.0.1",
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.39.2",
-    "@formatjs/cli-lib": "^8.0.4",
+    "@formatjs/cli-lib": "^8.2.1",
     "babel-loader": "^10.0.0",
     "babel-plugin-prismjs": "^2.1.0",
     "babel-plugin-transform-flow-strip-types": "^6.22.0",
@@ -115,7 +115,7 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-1": "^6.24.1",
     "babel-regenerator-runtime": "^6.5.0",
-    "chai": "^6.2.1",
+    "chai": "^6.2.2",
     "chai-immutable": "^2.1.0",
     "chai-spies": "^1.1.0",
     "colors": "^1.4.0",
@@ -128,35 +128,35 @@
     "eslint-config-standard-react": "13.0.0",
     "eslint-import-resolver-node": "^0.3.9",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-n": "^17.23.1",
+    "eslint-plugin-n": "^17.23.2",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-promise": "^7.2.1",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-standard": "^5.0.0",
     "fetch-mock": "12.6.0",
     "file-loader": "^6.2.0",
     "git-revision-webpack-plugin": "^5.0.0",
-    "globals": "^16.5.0",
+    "globals": "^17.1.0",
     "image-webpack-loader": "^8.1.0",
     "isomorphic-style-loader": "^5.4.0",
-    "jsdom": "^27.3.0",
+    "jsdom": "^27.4.0",
     "json-loader": "^0.5.7",
     "less": "^4.5.1",
     "less-loader": "^12.3.0",
-    "mini-css-extract-plugin": "^2.9.4",
+    "mini-css-extract-plugin": "^2.10.0",
     "mocha": "^11.7.5",
     "mocha-lcov-reporter": "^1.3.0",
     "mock-local-storage": "^1.1.24",
     "postcss-loader": "^8.2.0",
-    "prettier": "^3.7.4",
+    "prettier": "^3.8.1",
     "react-intl-translations-manager": "^5.0.3",
     "strip-loader": "^0.1.2",
     "style-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.3.16",
     "webpack": "5.104.1",
     "webpack-cli": "^6.0.1",
     "webpack-dev-middleware": "^7.4.5",
-    "webpack-dev-server": "^5.2.2",
+    "webpack-dev-server": "^5.2.3",
     "webpack-isomorphic-tools": "^4.0.0"
   },
   "packageManager": "yarn@3.2.1"
diff --git a/src/components/Assignments/Assignment/AssignmentDetails/AssignmentDetails.js b/src/components/Assignments/Assignment/AssignmentDetails/AssignmentDetails.js
@@ -334,7 +334,7 @@ const AssignmentDetails = ({
         </Table>
 
         {(maxPointsBeforeFirstDeadline !== 0 || (allowSecondDeadline && maxPointsBeforeSecondDeadline !== 0)) && (
-          <Modal show={open} backdrop="static" onHide={() => setOpen(false)} size="xl">
+          <Modal show={open} onHide={() => setOpen(false)} onEscapeKeyDown={() => setOpen(false)} size="xl">
             <Modal.Header closeButton>
               <Modal.Title>
                 <FormattedMessage
diff --git a/src/components/Assignments/Assignment/AssignmentsTable/AssignmentsTable.js b/src/components/Assignments/Assignment/AssignmentsTable/AssignmentsTable.js
@@ -452,7 +452,11 @@ class AssignmentsTable extends Component {
         </UserUIDataContext.Consumer>
 
         {!noDiscussion && (
-          <Modal show={this.state.dialogAssignment !== null} backdrop="static" onHide={this.closeDialog} size="xl">
+          <Modal
+            show={this.state.dialogAssignment !== null}
+            onHide={this.closeDialog}
+            onEscapeKeyDown={this.closeDialog}
+            size="xl">
             {this.state.dialogAssignment && (
               <CommentThreadContainer
                 threadId={this.state.dialogAssignment.id}
diff --git a/src/components/Assignments/ShadowAssignmentPointsTable/ShadowAssignmentPointsTable.js b/src/components/Assignments/ShadowAssignmentPointsTable/ShadowAssignmentPointsTable.js
@@ -247,7 +247,7 @@ class ShadowAssignmentPointsTable extends Component {
             </tbody>
           </Table>
 
-          <Modal show={this.state.dialogOpen} backdrop="static" onHide={this.closeDialog} size="xl">
+          <Modal show={this.state.dialogOpen} onHide={this.closeDialog} onEscapeKeyDown={this.closeDialog} size="xl">
             <Modal.Header closeButton>
               <Modal.Title>
                 <FormattedMessage
diff --git a/src/components/Exercises/ExerciseButtons/ExerciseButtons.js b/src/components/Exercises/ExerciseButtons/ExerciseButtons.js
@@ -74,7 +74,7 @@ const ExerciseButtons = ({ id, archivedAt = null, permissionHints = null, sendNo
         </Col>
       </Row>
 
-      <Modal show={message !== null} backdrop="static" onHide={() => setMessage(null)} size="xl">
+      <Modal show={message !== null} onHide={() => setMessage(null)} onEscapeKeyDown={() => setMessage(null)} size="xl">
         <Modal.Header closeButton>
           <Modal.Title>
             <FormattedMessage
diff --git a/src/components/Exercises/ExerciseGroups/ExerciseGroups.js b/src/components/Exercises/ExerciseGroups/ExerciseGroups.js
@@ -95,7 +95,7 @@ class ExerciseGroups extends Component {
           </Table>
 
           {showButtons && (
-            <Modal show={this.state.dialogOpen} backdrop="static" onHide={this.closeDialog} size="xl">
+            <Modal show={this.state.dialogOpen} onHide={this.closeDialog} onEscapeKeyDown={this.closeDialog} size="xl">
               <Modal.Header closeButton>
                 <Modal.Title>
                   <FormattedMessage
diff --git a/src/components/Exercises/FilesTable/FilesLinksTable.js b/src/components/Exercises/FilesTable/FilesLinksTable.js
@@ -272,7 +272,7 @@ const FilesLinksTable = ({
         </TheButtonGroup>
       </div>
 
-      <Modal show={filesOpen} backdrop="static" size="xl" onHide={() => setFilesOpen(false)}>
+      <Modal show={filesOpen} size="xl" onHide={() => setFilesOpen(false)} onEscapeKeyDown={() => setFilesOpen(false)}>
         <Modal.Header closeButton>
           <Modal.Title>
             <FormattedMessage id="app.filesLinksTable.manageExerciseFiles" defaultMessage="Manage Exercise Files" />
@@ -283,7 +283,11 @@ const FilesLinksTable = ({
         </Modal.Body>
       </Modal>
 
-      <Modal show={formOpen && Boolean(files)} backdrop="static" size="xl" onHide={() => setFormOpen(false)}>
+      <Modal
+        show={formOpen && Boolean(files)}
+        size="xl"
+        onHide={() => setFormOpen(false)}
+        onEscapeKeyDown={() => setFormOpen(false)}>
         <Modal.Header closeButton>
           <Modal.Title>
             {editLink ? (
diff --git a/src/components/Groups/AddStudent/AddStudent.js b/src/components/Groups/AddStudent/AddStudent.js
@@ -117,7 +117,11 @@ const AddStudent = ({ groups, groupsAccessor, groupId, instanceId, canSearch = f
             </Row>
           </InsetPanel>
 
-          <Modal show={dialogOpen} backdrop="static" onHide={() => setDialogOpen(false)} size="xl">
+          <Modal
+            show={dialogOpen}
+            onHide={() => setDialogOpen(false)}
+            onEscapeKeyDown={() => setDialogOpen(false)}
+            size="xl">
             <Modal.Header closeButton>
               <Modal.Title>
                 <FormattedMessage id="app.addStudent.inviteDialog.title" defaultMessage="Send invitation to ReCodEx" />
diff --git a/src/components/Groups/GroupExamStatus/GroupExamStatus.js b/src/components/Groups/GroupExamStatus/GroupExamStatus.js
@@ -350,7 +350,11 @@ class GroupExamStatus extends Component {
         </Callout>
 
         {hasPermissions(group, 'setExamPeriod') && (
-          <Modal size="xl" show={this.state.examModal} onHide={this.examModalClose}>
+          <Modal
+            size="xl"
+            show={this.state.examModal}
+            onHide={this.examModalClose}
+            onEscapeKeyDown={this.examModalClose}>
             <Modal.Header closeButton>
               <Modal.Title>
                 {this.state.hasExam ? (
diff --git a/src/components/Pipelines/VariableForm/VariableForm.js b/src/components/Pipelines/VariableForm/VariableForm.js
@@ -40,7 +40,7 @@ class VariableForm extends Component {
     } = this.props;
 
     return (
-      <Modal show={show} onHide={onHide} keyboard size="lg">
+      <Modal show={show} onHide={onHide} onEscapeKeyDown={onHide} size="lg">
         <Modal.Header closeButton>
           <h5>
             {editing ? (
diff --git a/src/components/Solutions/PlagiarismCodeBoxWithSelector/PlagiarismCodeBoxWithSelector.js b/src/components/Solutions/PlagiarismCodeBoxWithSelector/PlagiarismCodeBoxWithSelector.js
@@ -108,7 +108,11 @@ class PlagiarismCodeBoxWithSelector extends Component {
             />
 
             {selectedPlagiarismSource.files.length > 1 && (
-              <Modal show={this.state.dialogOpen} backdrop="static" onHide={this.closeDialog} size="xl">
+              <Modal
+                show={this.state.dialogOpen}
+                onHide={this.closeDialog}
+                onEscapeKeyDown={this.closeDialog}
+                size="xl">
                 <Modal.Header closeButton>
                   <Modal.Title>
                     {this.state.selectedFile !== null && this.state.switchTo ? (
diff --git a/src/components/Solutions/SolutionStatus/SolutionStatus.js b/src/components/Solutions/SolutionStatus/SolutionStatus.js
@@ -538,7 +538,11 @@ class SolutionStatus extends Component {
         </Box>
 
         {Boolean(editNote) && (
-          <Modal show={this.state.editDialogOpen} backdrop="static" onHide={this.closeDialog} size="xl">
+          <Modal
+            show={this.state.editDialogOpen}
+            onHide={this.closeDialog}
+            onEscapeKeyDown={this.closeDialog}
+            size="xl">
             <Modal.Header closeButton>
               <Modal.Title>
                 {referenceSolution ? (
@@ -561,7 +565,11 @@ class SolutionStatus extends Component {
         )}
 
         {!referenceSolution && evaluation && (
-          <Modal show={this.state.explainDialogOpen} backdrop="static" onHide={this.closeDialog} size="xl">
+          <Modal
+            show={this.state.explainDialogOpen}
+            onHide={this.closeDialog}
+            onEscapeKeyDown={this.closeDialog}
+            size="xl">
             <Modal.Header closeButton>
               <Modal.Title>
                 <FormattedMessage
@@ -704,7 +712,11 @@ class SolutionStatus extends Component {
         )}
 
         {assignmentSolverSelector && (
-          <Modal show={this.state.otherSolutionsDialogOpen} backdrop="static" onHide={this.closeDialog} size="xl">
+          <Modal
+            show={this.state.otherSolutionsDialogOpen}
+            onHide={this.closeDialog}
+            onEscapeKeyDown={this.closeDialog}
+            size="xl">
             <Modal.Header closeButton>
               <Modal.Title>
                 <FormattedMessage
diff --git a/src/components/Solutions/SubmitSolution/SubmitSolution.js b/src/components/Solutions/SubmitSolution/SubmitSolution.js
@@ -186,7 +186,7 @@ class SubmitSolution extends Component {
     } = this.props;
 
     return (
-      <Modal show={isOpen} backdrop="static" onHide={onClose} size="xl">
+      <Modal show={isOpen} onHide={onClose} onEscapeKeyDown={onClose} size="xl">
         <Modal.Header closeButton>
           <Modal.Title>{formatMessage(messages.title)}</Modal.Title>
         </Modal.Header>
@@ -263,11 +263,11 @@ class SubmitSolution extends Component {
 
               {Boolean(
                 !isValidating &&
-                  presubmitVariables &&
-                  presubmitVariables.length > 0 &&
-                  attachedFiles &&
-                  attachedFiles.length > 1 &&
-                  hasEntryPoint(presubmitVariables, selectedEnvironment)
+                presubmitVariables &&
+                presubmitVariables.length > 0 &&
+                attachedFiles &&
+                attachedFiles.length > 1 &&
+                hasEntryPoint(presubmitVariables, selectedEnvironment)
               ) && (
                 <FormGroup className="mb-3">
                   <FormLabel className={selectedEntryPoint ? '' : 'text-danger'}>
diff --git a/src/components/SubmissionFailures/ResolveFailure/ResolveFailure.js b/src/components/SubmissionFailures/ResolveFailure/ResolveFailure.js
@@ -29,7 +29,7 @@ const ResolveFailure = ({
   invalid,
   reset,
 }) => (
-  <Modal show={isOpen} backdrop="static" onHide={onClose} size="xl">
+  <Modal show={isOpen} onHide={onClose} onEscapeKeyDown={onClose} size="xl">
     <Modal.Header closeButton>
       <Modal.Title>
         <FormattedMessage id="app.submissionFailures.resolveTitle" defaultMessage="Resolve Failure" />
diff --git a/src/components/forms/EditAssignmentForm/InterpolationDialog.js b/src/components/forms/EditAssignmentForm/InterpolationDialog.js
@@ -54,7 +54,7 @@ const InterpolationDialog = ({
         <Icon icon="calculator" />
       </Button>
 
-      <Modal show={open && valid} backdrop="static" onHide={() => setOpen(false)} size="xl">
+      <Modal show={open && valid} onHide={() => setOpen(false)} onEscapeKeyDown={() => setOpen(false)} size="xl">
         <Modal.Header closeButton>
           <Modal.Title>
             <FormattedMessage
diff --git a/src/components/forms/EditSystemMessageForm/EditSystemMessageForm.js b/src/components/forms/EditSystemMessageForm/EditSystemMessageForm.js
@@ -42,7 +42,7 @@ const EditSystemMessageForm = ({
   createNew = false,
   intl: { formatMessage },
 }) => (
-  <Modal show={isOpen} backdrop="static" size="lg" onHide={onClose}>
+  <Modal show={isOpen} size="lg" onHide={onClose} onEscapeKeyDown={onClose}>
     <Modal.Header closeButton>
       <Modal.Title>
         {createNew ? (
diff --git a/src/components/forms/EditTestsForm/EditTestsForm.js b/src/components/forms/EditTestsForm/EditTestsForm.js
@@ -215,7 +215,11 @@ class EditTestsForm extends Component {
                       )}
                     </TheButtonGroup>
 
-                    <Modal show={this.state.dialogOpen} backdrop="static" onHide={this.closeDialog} size="xl">
+                    <Modal
+                      show={this.state.dialogOpen}
+                      onHide={this.closeDialog}
+                      onEscapeKeyDown={this.closeDialog}
+                      size="xl">
                       <Modal.Header closeButton>
                         <Modal.Title>
                           <FormattedMessage
diff --git a/src/components/forms/Fields/MarkdownTextAreaField.js b/src/components/forms/Fields/MarkdownTextAreaField.js
@@ -131,7 +131,6 @@ class MarkdownTextAreaField extends Component {
         {(preview === true || preview === PREVIEW_MODAL || preview === PREVIEW_FIRST) && (
           <Modal
             show={show}
-            backdrop="static"
             onHide={this.hideDialog}
             onEscapeKeyDown={this.hideDialog}
             size="xl"
diff --git a/src/components/scoreConfig/ScoreConfigInfo/ScoreConfigInfoDialog.js b/src/components/scoreConfig/ScoreConfigInfo/ScoreConfigInfoDialog.js
@@ -8,7 +8,7 @@ import ScoreConfigInfo from './ScoreConfigInfo.js';
 import ResourceRenderer from '../../helpers/ResourceRenderer';
 
 const ScoreConfigInfoDialog = ({ show, onHide, scoreConfig, testResults, canResubmit = false }) => (
-  <Modal show={show} backdrop="static" onHide={onHide} size="xl">
+  <Modal show={show} onHide={onHide} onEscapeKeyDown={onHide} size="xl">
     <Modal.Header closeButton>
       <Modal.Title>
         <FormattedMessage id="app.scoreConfigInfo.dialogTitle" defaultMessage="Correctness Algorithm" />
diff --git a/src/components/scoreConfig/ScoreConfigUniversalExpression/ScoreConfigUniversalExpression.js b/src/components/scoreConfig/ScoreConfigUniversalExpression/ScoreConfigUniversalExpression.js
diff --git a/src/containers/GroupInvitationsContainer/GroupInvitationsContainer.js b/src/containers/GroupInvitationsContainer/GroupInvitationsContainer.js
diff --git a/src/containers/SourceCodeViewerContainer/SourceCodeViewerContainer.js b/src/containers/SourceCodeViewerContainer/SourceCodeViewerContainer.js
diff --git a/src/pages/AssignmentSolutions/AssignmentSolutions.js b/src/pages/AssignmentSolutions/AssignmentSolutions.js
diff --git a/src/pages/ExerciseReferenceSolutions/ExerciseReferenceSolutions.js b/src/pages/ExerciseReferenceSolutions/ExerciseReferenceSolutions.js
diff --git a/src/pages/SolutionSourceCodes/SolutionSourceCodes.js b/src/pages/SolutionSourceCodes/SolutionSourceCodes.js
diff --git a/src/pages/Users/Users.js b/src/pages/Users/Users.js
diff --git a/yarn.lock b/yarn.lock
