From dcb21f71cb9756e6c824ad95792fba2c4b21f9e0 Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Tue, 18 Mar 2025 21:36:57 +0100
Subject: [PATCH] Added auto focus to adjust spool input field

Resolves #585
---
 client/src/pages/spools/functions.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/spools/functions.tsx b/client/src/pages/spools/functions.tsx
index 5294781..3388277 100644
--- a/client/src/pages/spools/functions.tsx
+++ b/client/src/pages/spools/functions.tsx
@@ -2,7 +2,7 @@ import { useSelect, useTranslate } from "@refinedev/core";
 import { useQueries } from "@tanstack/react-query";
 import { Form, InputNumber, Modal, Radio } from "antd";
 import { useForm } from "antd/es/form/Form";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { formatLength, formatWeight } from "../../utils/parsing";
 import { SpoolType, useGetExternalDBFilaments } from "../../utils/queryExternalDB";
 import { getAPIURL } from "../../utils/url";
@@ -181,9 +181,13 @@ export function useSpoolAdjustModal() {
 
   const [curSpool, setCurSpool] = useState<ISpool | null>(null);
   const [measurementType, setMeasurementType] = useState<MeasurementType>("length");
+  const inputNumberRef = useRef<HTMLInputElement | null>(null);
 
   const openSpoolAdjustModal = useCallback((spool: ISpool) => {
     setCurSpool(spool);
+    setTimeout(() => {
+      inputNumberRef.current?.focus();
+    }, 0);
   }, []);
 
   const spoolAdjustModal = useMemo(() => {
@@ -224,7 +228,7 @@ export function useSpoolAdjustModal() {
             </Radio.Group>
           </Form.Item>
           <Form.Item label={t("spool.form.adjust_filament_value")} name="filament_value">
-            <InputNumber precision={1} addonAfter={measurementType === "length" ? "mm" : "g"} />
+            <InputNumber ref={inputNumberRef} precision={1} addonAfter={measurementType === "length" ? "mm" : "g"} />
           </Form.Item>
         </Form>
       </Modal>