fix input field

levkk · levkk · commit c26fde732a29 · 2024-04-05T11:58:44.000-07:00
diff --git a/pgml-dashboard/src/components/inputs/range_group_v_2/range_group_v_2.scss b/pgml-dashboard/src/components/inputs/range_group_v_2/range_group_v_2.scss
@@ -5,11 +5,31 @@ div[data-controller="inputs-range-group-v-2"] {
   }
 
   input[type="text"] {
-    padding-right: 30px;
+    padding-right: 0;
+    border-right: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
   .inputs-range-group-v-2-unit {
-    margin-left: -33px;
     color: #{$gray-400};
+    background: #{$input-bg};
+    height: 100%;
+    padding: #{$input-padding-y} #{$input-padding-x};
+    border: #{$input-border-width} solid #{$input-border-color};
+
+    border-top-right-radius: var(--bs-border-radius);
+    border-bottom-right-radius: var(--bs-border-radius);
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left: 0;
+    transition: #{$input-transition};
+
+    &.focused {
+        background: #{$input-focus-bg};
+        box-shadow: #{$input-focus-box-shadow};
+        border-color: #{$input-focus-border-color};
+        border-width: #{$input-border-width};
+    }
   }
 }
diff --git a/pgml-dashboard/src/components/inputs/range_group_v_2/range_group_v_2_controller.js b/pgml-dashboard/src/components/inputs/range_group_v_2/range_group_v_2_controller.js
@@ -1,7 +1,7 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
-  static targets = ["input", "range"];
+  static targets = ["input", "range", "unit"];
 
   onInputInput(e) {
     const value = parseInt(e.currentTarget.value);
@@ -14,6 +14,18 @@ export default class extends Controller {
     }
   }
 
+  onInputFocusIn(e) {
+    this.unitTarget.classList.add("focused");
+  }
+
+  onInputBlur(e) {
+    this.unitTarget.classList.remove("focused");
+  }
+
+  onUnitClick(e) {
+    this.inputTarget.focus();
+  }
+
   onRangeInput(e) {
     this.inputTarget.value = e.currentTarget.value;
   }
diff --git a/pgml-dashboard/src/components/inputs/range_group_v_2/template.html b/pgml-dashboard/src/components/inputs/range_group_v_2/template.html
@@ -16,11 +16,15 @@
         <input
           type="text"
           class="form-control"
-          data-action="input->inputs-range-group-v-2#onInputInput <%= actions %>"
+          data-action="input->inputs-range-group-v-2#onInputInput focusin->inputs-range-group-v-2#onInputFocusIn blur->inputs-range-group-v-2#onInputBlur <%= actions %>"
           data-inputs-range-group-v-2-target="input"
           value="<%= value %>"
         >
-        <span class="inputs-range-group-v-2-unit fw-semibold">
+        <span
+          class="inputs-range-group-v-2-unit fw-semibold"
+          data-inputs-range-group-v-2-target="unit"
+          data-action="click->inputs-range-group-v-2#onUnitClick"
+        >
           <%= input_unit %>
         </span>
       </div>
