diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 747438b632..209dc32e71 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -13,10 +13,14 @@ jobs:
         name: Test on php ${{ matrix.php-version }} and ${{ matrix.os }}
         if: "!contains(github.event.head_commit.message, '[ci skip]')"
         runs-on: ${{ matrix.os }}
+        continue-on-error: ${{ matrix.experimental }}
         strategy:
             matrix:
                 php-version: ["7.2", "7.3", "7.4", "8.0"]
+                experimental: [false]
                 os: [ubuntu-latest]
+                include:
+                    - { php-version: '8.1', composer-options: '--ignore-platform-req=php', experimental: true, os: ubuntu-latest }
         steps:
             - uses: actions/checkout@v2
             - name: Install gettext
@@ -35,7 +39,7 @@ jobs:
                   path: ~/.composer/cache/
                   key: composer-cache
             - name: Install dependencies
-              run: composer install --no-interaction
+              run: composer install --no-interaction ${{ matrix.composer-options }}
             - name: Run php tests
               run: composer run phpunit --  --exclude-group selenium
             - name: Send coverage
diff --git a/ChangeLog b/ChangeLog
index c1dbd8565d..c809b348be 100644
--- a/ChangeLog
+++ b/ChangeLog
@@ -37,6 +37,7 @@ phpMyAdmin - ChangeLog
 - issue        Fixed a PHP notice "Undefined index: pred_username"
 - issue #16744 Fixed "Uncaught TypeError: XMLWriter::writeAttribute()" on Designer SVG export
 - issue        Fixed an PHP undefined index notice on export
+- issue #14555 Fixed JavaScript error when auto completion is open (upgraded CodeMirror to 5.60.0)
 
 5.1.0 (2021-02-24)
 - issue #15350 Change Media (MIME) type references to Media type
diff --git a/js/vendor/codemirror/addon/hint/show-hint.js b/js/vendor/codemirror/addon/hint/show-hint.js
index a9f2ded18c..bfe7d3a353 100644
--- a/js/vendor/codemirror/addon/hint/show-hint.js
+++ b/js/vendor/codemirror/addon/hint/show-hint.js
@@ -360,7 +360,7 @@
     close: function() {
       if (this.completion.widget != this) return;
       this.completion.widget = null;
-      this.hints.parentNode.removeChild(this.hints);
+      if (this.hints.parentNode) this.hints.parentNode.removeChild(this.hints);
       this.completion.cm.removeKeyMap(this.keyMap);
 
       var cm = this.completion.cm;
diff --git a/js/vendor/codemirror/lib/codemirror.css b/js/vendor/codemirror/lib/codemirror.css
index 5ea2d2be2a..a64f97c777 100644
--- a/js/vendor/codemirror/lib/codemirror.css
+++ b/js/vendor/codemirror/lib/codemirror.css
@@ -19,7 +19,7 @@
 }
 
 .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
-  background-color: transparent; /* The little square between H and V scrollbars */
+  background-color: white; /* The little square between H and V scrollbars */
 }
 
 /* GUTTER */
diff --git a/js/vendor/codemirror/lib/codemirror.js b/js/vendor/codemirror/lib/codemirror.js
index 9aa6da5df5..055963b048 100644
--- a/js/vendor/codemirror/lib/codemirror.js
+++ b/js/vendor/codemirror/lib/codemirror.js
@@ -4798,19 +4798,19 @@
     });
   }
 
-  function History(startGen) {
+  function History(prev) {
     // Arrays of change events and selections. Doing something adds an
     // event to done and clears undo. Undoing moves events from done
     // to undone, redoing moves them in the other direction.
     this.done = []; this.undone = [];
-    this.undoDepth = Infinity;
+    this.undoDepth = prev ? prev.undoDepth : Infinity;
     // Used to track when changes can be merged into a single undo
     // event
     this.lastModTime = this.lastSelTime = 0;
     this.lastOp = this.lastSelOp = null;
     this.lastOrigin = this.lastSelOrigin = null;
     // Used by the isClean() method
-    this.generation = this.maxGeneration = startGen || 1;
+    this.generation = this.maxGeneration = prev ? prev.maxGeneration : 1;
   }
 
   // Create a history change event from an updateDoc-style change
@@ -6181,7 +6181,7 @@
       var out = [];
       for (var i = 0; i < ranges.length; i++)
         { out[i] = new Range(clipPos(this, ranges[i].anchor),
-                           clipPos(this, ranges[i].head)); }
+                           clipPos(this, ranges[i].head || ranges[i].anchor)); }
       if (primary == null) { primary = Math.min(ranges.length - 1, this.sel.primIndex); }
       setSelection(this, normalizeSelection(this.cm, out, primary), options);
     }),
@@ -6244,7 +6244,7 @@
     clearHistory: function() {
       var this$1 = this;
 
-      this.history = new History(this.history.maxGeneration);
+      this.history = new History(this.history);
       linkedDocs(this, function (doc) { return doc.history = this$1.history; }, true);
     },
 
@@ -6265,7 +6265,7 @@
               undone: copyHistoryArray(this.history.undone)}
     },
     setHistory: function(histData) {
-      var hist = this.history = new History(this.history.maxGeneration);
+      var hist = this.history = new History(this.history);
       hist.done = copyHistoryArray(histData.done.slice(0), null, true);
       hist.undone = copyHistoryArray(histData.undone.slice(0), null, true);
     },
@@ -7708,7 +7708,7 @@
       for (var i = newBreaks.length - 1; i >= 0; i--)
         { replaceRange(cm.doc, val, newBreaks[i], Pos(newBreaks[i].line, newBreaks[i].ch + val.length)); }
     });
-    option("specialChars", /[\u0000-\u001f\u007f-\u009f\u00ad\u061c\u200b-\u200c\u200e\u200f\u2028\u2029\ufeff\ufff9-\ufffc]/g, function (cm, val, old) {
+    option("specialChars", /[\u0000-\u001f\u007f-\u009f\u00ad\u061c\u200b\u200e\u200f\u2028\u2029\ufeff\ufff9-\ufffc]/g, function (cm, val, old) {
       cm.state.specialChars = new RegExp(val.source + (val.test("\t") ? "" : "|\t"), "g");
       if (old != Init) { cm.refresh(); }
     });
@@ -8766,6 +8766,7 @@
 
     var input = this, cm = input.cm;
     var div = input.div = display.lineDiv;
+    div.contentEditable = true;
     disableBrowserMagic(div, cm.options.spellcheck, cm.options.autocorrect, cm.options.autocapitalize);
 
     function belongsToInput(e) {
@@ -9793,7 +9794,7 @@
 
   addLegacyProps(CodeMirror);
 
-  CodeMirror.version = "5.59.2";
+  CodeMirror.version = "5.60.0";
 
   return CodeMirror;
 
diff --git a/js/vendor/codemirror/mode/javascript/javascript.js b/js/vendor/codemirror/mode/javascript/javascript.js
index 047395622e..a42f23d07f 100644
--- a/js/vendor/codemirror/mode/javascript/javascript.js
+++ b/js/vendor/codemirror/mode/javascript/javascript.js
@@ -218,7 +218,8 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
 
   // Parser
 
-  var atomicTypes = {"atom": true, "number": true, "variable": true, "string": true, "regexp": true, "this": true, "jsonld-keyword": true};
+  var atomicTypes = {"atom": true, "number": true, "variable": true, "string": true,
+                     "regexp": true, "this": true, "import": true, "jsonld-keyword": true};
 
   function JSLexical(indented, column, type, align, prev, info) {
     this.indented = indented;
@@ -441,7 +442,6 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
     if (type == "{") return contCommasep(objprop, "}", null, maybeop);
     if (type == "quasi") return pass(quasi, maybeop);
     if (type == "new") return cont(maybeTarget(noComma));
-    if (type == "import") return cont(expression);
     return cont();
   }
   function maybeexpression(type) {
@@ -605,7 +605,7 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
     }
   }
   function typeexpr(type, value) {
-    if (value == "keyof" || value == "typeof" || value == "infer") {
+    if (value == "keyof" || value == "typeof" || value == "infer" || value == "readonly") {
       cx.marked = "keyword"
       return cont(value == "typeof" ? expressionNoComma : typeexpr)
     }
@@ -802,6 +802,7 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
   function afterImport(type) {
     if (type == "string") return cont();
     if (type == "(") return pass(expression);
+    if (type == ".") return pass(maybeoperatorComma);
     return pass(importSpec, maybeMoreImports, maybeFrom);
   }
   function importSpec(type, value) {
diff --git a/package.json b/package.json
index b76994c304..e373098712 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "autoprefixer": "^10.2.4",
     "blueimp-md5": "^2.18.0",
     "bootstrap": "5.0.0-beta2",
-    "codemirror": "5.59.2",
+    "codemirror": "5.60.0",
     "jquery": "3.5.1",
     "jquery-debounce-throttle": "^1.0.6-rc.0",
     "jquery-migrate": "3.3.2",
diff --git a/templates/login/form.twig b/templates/login/form.twig
index ce902a08dc..1dd044636c 100644
--- a/templates/login/form.twig
+++ b/templates/login/form.twig
@@ -1,7 +1,7 @@
 {{ login_header|raw }}
 
 {% if is_demo %}
-  <fieldset class="pma-fieldset">
+  <fieldset class="pma-fieldset mb-4">
     <legend>{% trans 'phpMyAdmin Demo Server' %}</legend>
     {% apply format('<a href="url.php?url=https://demo.phpmyadmin.net/" target="_blank" rel="noopener noreferrer">demo.phpmyadmin.net</a>')|raw %}
       {% trans %}
diff --git a/yarn.lock b/yarn.lock
index 8f4e236944..2540e09cf4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2254,10 +2254,10 @@ co@^4.6.0:
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
   integrity sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=
 
-codemirror@5.59.2:
-  version "5.59.2"
-  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.59.2.tgz#ee674d3a4a8d241af38d52afc482625ba7393922"
-  integrity sha512-/D5PcsKyzthtSy2NNKCyJi3b+htRkoKv3idswR/tR6UAvMNKA7SrmyZy6fOONJxSRs1JlUWEDAbxqfdArbK8iA==
+codemirror@5.60.0:
+  version "5.60.0"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.60.0.tgz#00a8cfd287d5d8737ceb73987f04aee2fe5860da"
+  integrity sha512-AEL7LhFOlxPlCL8IdTcJDblJm8yrAGib7I+DErJPdZd4l6imx8IMgKK3RblVgBQqz3TZJR4oknQ03bz+uNjBYA==
 
 collect-v8-coverage@^1.0.0:
   version "1.0.1"