Added auto focus to adjust spool input field

Resolves #585

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>