tweaked tab titles to be more normally editable.

1 files changed, 10 insertions, 2 deletions

diff --git a/src/client/goldenLayout.js b/src/client/goldenLayout.js
index 295875ef6..82b10608d 100644
--- a/src/client/goldenLayout.js
+++ b/src/client/goldenLayout.js
@@ -388,8 +388,8 @@
         },
 
         onMouseDown: function (oEvent) {
-            oEvent.preventDefault();
-
+            //oEvent.preventDefault();  // don't prevent deafult as this will stop text selection
+            if (oEvent.target && oEvent.target.className === "lm_title") return;  // if the title is active and receiving events, then don't do tab dragging.
             if (oEvent.button == 0 || oEvent.type === "touchstart") {
                 var coordinates = this._getCoordinates(oEvent);
 
@@ -458,7 +458,13 @@
                 if (this._bDragging === true) {
                     this._bDragging = false;
                     this.emit('dragStop', oEvent, this._nOriginalX + this._nX);
+                } else if (oEvent.target) { // make title receive pointer events to allow setting insertion position or selecting texst range
+                    if (oEvent.target.className.includes("lm_title_wrap")) {
+                        oEvent.target.children[0].style.pointerEvents = "all";
+                        oEvent.target.children[0].focus();
+                    }
                 }
+
             }
         },
 
@@ -2870,6 +2876,8 @@
         this.closeElement = this.element.find('.lm_close_tab');
         this.closeElement[contentItem.config.isClosable ? 'show' : 'hide']();
         this.isActive = false;
+        this.titleElement[0].style.pointerEvents = "none";  // don't let title receive pointer events by default -- need to click on it to make it editable -- this allows the tab to be dragged
+        this.titleElement[0].onblur = () => this.titleElement[0].style.pointerEvents = "none";
 
         this.setTitle(contentItem.config.title);
         this.contentItem.on('titleChanged', this.setTitle, this);