Merge pull request #2905 from selberhad/fix_multi_input_focus

fix: multiple inputs now retain focus correctly

evennia/web/static/webclient/js/plugins/default_in.js

@@ -47,7 +47,7 @@ let defaultInPlugin = (function () {
 
                     // enter key by itself should toggle focus
                     if( inputfield.length < 1 ) {
-                        inputfield = $(".inputfield:last");
+                        inputfield = $(".inputfield.focused");
                         inputfield.focus();
                         if( inputfield.length < 1 ) { // non-goldenlayout backwards compatibility
                             $("#inputfield").focus();
@@ -64,9 +64,9 @@ let defaultInPlugin = (function () {
                 if( focusOnKeydown ) {
                     // is an inputfield actually focused?
                     if( inputfield.length < 1 ) {
-                        // Nope, focus the last .inputfield found in the DOM (or #inputfield)
+                        // Nope, focus the most recently used input field (or #inputfield)
-                        //     :last only matters if multi-input plugins are in use
+                        //     .focused only matters if multi-input plugins are in use
-                        inputfield = $(".inputfield:last");
+                        inputfield = $(".inputfield.focused");
                         inputfield.focus();
                         if( inputfield.length < 1 ) { // non-goldenlayout backwards compatibility
                             $("#inputfield").focus();

evennia/web/static/webclient/js/plugins/goldenlayout.js

@@ -32,6 +32,20 @@ let goldenlayout = (function () {
         id: "inputComponent",
     };
 
+    // helper function: only allow a function to be called once
+    function once(func) {
+      function _f() {
+        if (!_f.isCalled) {
+          _f.isCalled = true;
+          _f.res = func.apply(this, arguments);
+        }
+        return _f.res;
+      }
+      _f.prototype = func.prototype;
+      _f.isCalled = false;
+      return _f;
+    }
+
     // helper function:  filter vals out of array
     function filter (vals, array) {
         if( Array.isArray( vals ) && Array.isArray( array ) ) {
@@ -247,10 +261,28 @@ let goldenlayout = (function () {
         }
     }
 
+    //
+    // ensure only one handler is set up on the parent with once
+    var registerInputTabChangeHandler = once(function (tab) {
+      tab.header.parent.on( "activeContentItemChanged", onActiveInputTabChange );
+    });
 
     //
+    // Handle when the active input tab changes
+    var onActiveInputTabChange = function (tab) {
+      $('.inputfield').removeClass('focused');
+      $('.inputfield', tab.tab.contentItem.element).addClass('focused');
+    }
+
     //
-    var onActiveTabChange = function (tab) {
+    // ensure only one handler is set up on the parent with once
+    var registerMainTabChangeHandler = once(function (tab) {
+      tab.header.parent.on( "activeContentItemChanged", onActiveMainTabChange );
+    });
+
+    //
+    // Handle when the active main tab changes
+    var onActiveMainTabChange = function (tab) {
         let renamebox  = document.getElementById("renamebox");
         let typelist   = document.getElementById("typelist");
         let updatelist = document.getElementById("updatelist");
@@ -268,7 +300,6 @@ let goldenlayout = (function () {
         }
     }
 
-
     //
     // Save the GoldenLayout state to localstorage whenever it changes.
     var onStateChanged = function () {
@@ -344,7 +375,7 @@ let goldenlayout = (function () {
             tab.element.prepend( $("#optionsbutton").clone(true).addClass("lm_title") );
         }
 
-        tab.header.parent.on( "activeContentItemChanged", onActiveTabChange );
+        registerMainTabChangeHandler(tab);
     }
 
 
@@ -352,7 +383,9 @@ let goldenlayout = (function () {
     //
     var onInputCreate = function (tab) {
         //HTML for the typeDropdown
-        let splitControl          = $("<span class='lm_title' style='font-size: 1.5em;width: 1em;'>+</span>");
+        let splitControl = $(
+            "<span class='lm_title' style='font-size: 1.5em;width: 1em;'>+</span>"
+        );
 
         // track adding a new tab
         splitControl.click( tab, function (evnt) {
@@ -362,7 +395,7 @@ let goldenlayout = (function () {
         // Add the typeDropdown to the header
         tab.element.append(  splitControl );
 
-        tab.header.parent.on( "activeContentItemChanged", onActiveTabChange );
+        registerInputTabChangeHandler(tab);
     }