Merge pull request #5 from robinsimonklein/fix/number-value-cursor-on-increment-decrement

Keep cursor at end on number value when decrement/increment

Author: robinsimonklein

src/components/core/value-tree/type/ValueTreeNumber.vue

@@ -55,6 +55,7 @@ import { nextTick, onMounted, ref, watch } from 'vue';
 import ValueTreeWrapper from '@/components/core/value-tree/ValueTreeWrapper.vue';
 import { Button } from '@/components/ui/button';
 import { Pencil, Check, XIcon, TriangleAlert } from 'lucide-vue-next';
+import { placeCursorAtEnd } from '@/utils/dom.ts';
 
 const props = withDefaults(
   defineProps<{
@@ -89,26 +90,23 @@ const decrement = () => {
   if (!valueElement.value) return;
   const value = parseFloat(valueElement.value.innerText);
   if (!isNaN(value)) valueElement.value.innerText = (value - 1).toString();
+  placeCursorAtEnd(valueElement.value);
 };
 
 const increment = () => {
   if (!isEditing.value) return;
   if (!valueElement.value) return;
   const value = parseFloat(valueElement.value.innerText);
   if (!isNaN(value)) valueElement.value.innerText = (value + 1).toString();
+  placeCursorAtEnd(valueElement.value);
 };
 
 const edit = () => {
   isEditing.value = true;
 
   nextTick(() => {
     if (!valueElement.value) return;
-    const range = document.createRange();
-    const sel = window.getSelection();
-    range.setStart(valueElement.value.childNodes[0], modelValue.value.toString().length);
-    range.collapse(true);
-    sel?.removeAllRanges();
-    sel?.addRange(range);
+    placeCursorAtEnd(valueElement.value);
     valueElement.value.focus();
     validate();
   });

src/components/core/value-tree/type/ValueTreeString.vue

@@ -51,6 +51,7 @@ import { nextTick, onMounted, ref, watch } from 'vue';
 import ValueTreeWrapper from '@/components/core/value-tree/ValueTreeWrapper.vue';
 import { Button } from '@/components/ui/button';
 import { Pencil, Check, XIcon } from 'lucide-vue-next';
+import { placeCursorAtEnd } from '@/utils/dom.ts';
 
 const props = withDefaults(
   defineProps<{
@@ -77,12 +78,7 @@ const edit = () => {
   isEditing.value = true;
   nextTick(() => {
     if (!valueElement.value) return;
-    const range = document.createRange();
-    const sel = window.getSelection();
-    range.setStart(valueElement.value.childNodes[0], modelValue.value.length);
-    range.collapse(true);
-    sel?.removeAllRanges();
-    sel?.addRange(range);
+    placeCursorAtEnd(valueElement.value);
     valueElement.value.focus();
   });
 };

src/utils/dom.ts

@@ -9,3 +9,12 @@ export const getElementSelectorString = (element: Element) => {
   }
   return str;
 };
+
+export const placeCursorAtEnd = (element: HTMLElement) => {
+  const range = document.createRange();
+  const sel = window.getSelection();
+  range.setStart(element.childNodes[0], element.innerText?.length);
+  range.collapse(true);
+  sel?.removeAllRanges();
+  sel?.addRange(range);
+};