From 4c4cfce6c05266c93404258c742454fbb0dd1640 Mon Sep 17 00:00:00 2001
From: rare-magma <rare-magma@posteo.eu>
Date: Sat, 10 Jun 2023 17:50:00 +0200
Subject: [PATCH] fix: item value input initial selection

---
 src/components/ItemForm/ItemFormGroup.test.tsx | 10 +++++-----
 src/components/ItemForm/ItemFormGroup.tsx      |  5 +++++
 src/components/TableCard/TableCard.test.tsx    | 10 +++++-----
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/ItemForm/ItemFormGroup.test.tsx b/src/components/ItemForm/ItemFormGroup.test.tsx
index 1a553c3..1ea9ab5 100644
--- a/src/components/ItemForm/ItemFormGroup.test.tsx
+++ b/src/components/ItemForm/ItemFormGroup.test.tsx
@@ -48,9 +48,9 @@ describe("ItemFormGroup", () => {
     expect(onChange).toBeCalledWith({
       id: 1,
       name: "name1change name",
-      value: 10123,
+      value: 123,
     });
-    expect(screen.getByDisplayValue("$10,123")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("$123")).toBeInTheDocument();
   });
 
   it("triggers onRemove when user clicks delete confirmation button", async () => {
@@ -64,12 +64,12 @@ describe("ItemFormGroup", () => {
     expect(onRemove).toBeCalledWith({
       id: 1,
       name: "name1change name",
-      value: 10123,
+      value: 123,
     });
   });
 
   it("shows tooltip when user hovers over", async () => {
-    fireEvent.mouseOver(screen.getByDisplayValue("$10,123"));
+    fireEvent.mouseOver(screen.getByDisplayValue("$123"));
 
     expect(await screen.findByText("1% of revenue")).toBeInTheDocument();
   });
@@ -101,7 +101,7 @@ describe("ItemFormGroup", () => {
       />
     );
 
-    await userEvent.clear(screen.getByDisplayValue("10123 €"));
+    await userEvent.clear(screen.getByDisplayValue("123 €"));
     await userEvent.type(screen.getByLabelText("item 1 value"), "123,12");
 
     expect(screen.getByDisplayValue("123,12 €")).toBeInTheDocument();
diff --git a/src/components/ItemForm/ItemFormGroup.tsx b/src/components/ItemForm/ItemFormGroup.tsx
index 79eead6..6482d8a 100644
--- a/src/components/ItemForm/ItemFormGroup.tsx
+++ b/src/components/ItemForm/ItemFormGroup.tsx
@@ -35,6 +35,7 @@ function ItemFormGroup({
   const [itemForm, setItemForm] = useState(initialItemForm);
   const [changed, setChanged] = useState(false);
   const deleteButtonRef = useRef<HTMLButtonElement>(null);
+  const valueRef = useRef<HTMLInputElement>(null);
 
   const handleRemove = (item: ItemForm) => {
     onRemove(item);
@@ -130,6 +131,10 @@ function ItemFormGroup({
           defaultValue={itemForm.value}
           allowNegativeValue={false}
           maxLength={14}
+          ref={valueRef}
+          onFocus={() => {
+            valueRef.current?.setSelectionRange(0, itemForm.value + 2);
+          }}
           onValueChange={(value) => handleChange("value", value)}
         />
       </OverlayTrigger>
diff --git a/src/components/TableCard/TableCard.test.tsx b/src/components/TableCard/TableCard.test.tsx
index 52681d7..cba3397 100644
--- a/src/components/TableCard/TableCard.test.tsx
+++ b/src/components/TableCard/TableCard.test.tsx
@@ -59,12 +59,12 @@ describe("TableCard", () => {
         {
           id: 1,
           name: "expense1change name",
-          value: 10123,
+          value: 123,
         },
       ],
-      total: 10123,
+      total: 123,
     });
-    expect(screen.getByDisplayValue("$10,123")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("$123")).toBeInTheDocument();
   });
 
   it("triggers onChange when user adds new item", async () => {
@@ -77,7 +77,7 @@ describe("TableCard", () => {
         {
           id: 1,
           name: "expense1change name",
-          value: 10123,
+          value: 123,
         },
         {
           id: 2,
@@ -85,7 +85,7 @@ describe("TableCard", () => {
           value: 0,
         },
       ],
-      total: 10123,
+      total: 123,
     });
   });