From a6e203e3e5a58f31e12a57827dd0575dfe8ba0ee Mon Sep 17 00:00:00 2001
From: Ryan Huffman <ryanhuffman@gmail.com>
Date: Mon, 26 Nov 2018 10:55:42 -0800
Subject: [PATCH] Fix draggable inputs not being tabbable

---
 scripts/system/html/css/edit-style.css     | 11 ++++----
 scripts/system/html/js/draggableNumber.js  | 32 ++++++++++++++++------
 scripts/system/html/js/entityProperties.js |  2 +-
 3 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css
index 5b5c9e057c..415d8e567f 100644
--- a/scripts/system/html/css/edit-style.css
+++ b/scripts/system/html/css/edit-style.css
@@ -916,7 +916,7 @@ div.refresh input[type="button"] {
 }
 .draggable-number div {
     height: 28px;
-    width: 92px;
+    width: 124px;
 }
 .draggable-number.text {
     display: inline-block;
@@ -929,6 +929,7 @@ div.refresh input[type="button"] {
     height: 28px;
     width: 100%;
     line-height: 2;
+    box-sizing: border-box;
 }
 .draggable-number.text:hover {
     cursor: ew-resize;
@@ -944,12 +945,12 @@ div.refresh input[type="button"] {
     cursor: default;
 }
 .draggable-number.left-arrow {
-    top: -5px;
+    top: 3px;
     left: 0px;
     transform: rotate(180deg);
 }
 .draggable-number.right-arrow {
-    top: -5px;
+    top: 3px;
     right: 0px;
 }
 .draggable-number input[type=number] {
@@ -971,14 +972,14 @@ div.refresh input[type="button"] {
     left: 12px;
 }
 .draggable-number.fstuple + .draggable-number.fstuple {
-    padding-left: 28px;
+    margin-left: 28px;
 }
 .draggable-number.fstuple input {
     right: -10px;
 }
 .draggable-number.fstuple .sublabel {
     position: absolute;
-    top: 0;
+    top: 6px;
     left: -16px;
     font-family: FiraSans-SemiBold;
     font-size: 15px;
diff --git a/scripts/system/html/js/draggableNumber.js b/scripts/system/html/js/draggableNumber.js
index c08cac2ce4..951b123e67 100644
--- a/scripts/system/html/js/draggableNumber.js
+++ b/scripts/system/html/js/draggableNumber.js
@@ -23,6 +23,20 @@ function DraggableNumber(min, max, step, decimals, dragStart, dragEnd) {
 }
 
 DraggableNumber.prototype = {
+    showInput: function() {
+        this.elText.style.visibility = "hidden";
+        this.elLeftArrow.style.visibility = "hidden";
+        this.elRightArrow.style.visibility = "hidden";
+        this.elInput.style.opacity = 1;
+    },
+
+    hideInput: function() {
+        this.elText.style.visibility = "visible";
+        this.elLeftArrow.style.visibility = "visible";
+        this.elRightArrow.style.visibility = "visible";
+        this.elInput.style.opacity = 0;
+    },
+
     mouseDown: function(event) {
         if (event.target === this.elText) {
             this.initialMouseEvent = event;
@@ -36,8 +50,8 @@ DraggableNumber.prototype = {
         if (event.target === this.elText && this.initialMouseEvent) {
             let dx = event.clientX - this.initialMouseEvent.clientX;
             if (Math.abs(dx) <= DELTA_X_FOCUS_THRESHOLD) {
-                this.elInput.style.visibility = "visible";
-                this.elText.style.visibility = "hidden";
+                this.showInput();
+                this.elInput.focus();
             }
             this.initialMouseEvent = null;
         }
@@ -125,9 +139,8 @@ DraggableNumber.prototype = {
         this.setValue(this.elInput.value);
     },
     
-    inputBlur: function() {
-        this.elInput.style.visibility = "hidden";
-        this.elText.style.visibility = "visible";
+    inputBlur: function(ev) {
+        this.hideInput();
     },
     
     initialize: function() {
@@ -171,13 +184,14 @@ DraggableNumber.prototype = {
         if (this.step !== undefined) {
             this.elInput.setAttribute("step", this.step);
         }
-        this.elInput.style.visibility = "hidden";
+        this.elInput.style.opacity = 0;
         this.elInput.addEventListener("change", this.onInputChange);
         this.elInput.addEventListener("blur", this.onInputBlur);
+        this.elInput.addEventListener("focus", this.showInput.bind(this));
         
-        this.elText.appendChild(this.elLeftArrow);
-        this.elText.appendChild(this.elInput);
-        this.elText.appendChild(this.elRightArrow);
+        this.elDiv.appendChild(this.elLeftArrow);
+        this.elDiv.appendChild(this.elInput);
+        this.elDiv.appendChild(this.elRightArrow);
         this.elDiv.appendChild(this.elText);
     }
 };
diff --git a/scripts/system/html/js/entityProperties.js b/scripts/system/html/js/entityProperties.js
index 78e3cd4dc8..786df503df 100644
--- a/scripts/system/html/js/entityProperties.js
+++ b/scripts/system/html/js/entityProperties.js
@@ -2149,7 +2149,7 @@ function createTupleNumberInput(property, subLabel) {
                                                 propertyData.decimals, dragStartFunction, dragEndFunction); 
     elDraggableNumber.elInput.setAttribute("id", elementID);
     elDraggableNumber.elDiv.className += " fstuple";
-    elDraggableNumber.elText.insertBefore(elLabel, elDraggableNumber.elLeftArrow);
+    elDraggableNumber.elDiv.insertBefore(elLabel, elDraggableNumber.elLeftArrow);
     
     return elDraggableNumber;
 }