fix: item value input initial selection

rare-magma · Jun 10, 2023 · 4c4cfce · 4c4cfce
1 parent e48ffa3
commit 4c4cfce
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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,15 +77,15 @@ describe("TableCard", () => {
         {
           id: 1,
           name: "expense1change name",
-          value: 10123,
+          value: 123,
         },
         {
           id: 2,
           name: "",
           value: 0,
         },
       ],
-      total: 10123,
+      total: 123,
     });
   });