Focus+select the quantity input in the stock add/count/remove dialog

src/frontend/src/components/forms/StandaloneField.tsx

@@ -9,13 +9,15 @@ export function StandaloneField({
   fieldName = 'field',
   defaultValue,
   hideLabels,
-  error
+  error,
+  selectAndFocus = false
 }: Readonly<{
   fieldDefinition: ApiFormFieldType;
   fieldName?: string;
   defaultValue?: any;
   hideLabels?: boolean;
   error?: string;
+  selectAndFocus?: boolean;
 }>) {
   // Field must have a defined name
   const name = useMemo(() => fieldName ?? 'field', [fieldName]);
@@ -49,6 +51,7 @@ export function StandaloneField({
         control={form.control}
         hideLabels={hideLabels}
         setFields={undefined}
+        selectAndFocus={selectAndFocus}
       />
     </FormProvider>
   );

src/frontend/src/components/forms/fields/ApiFormField.tsx

@@ -28,7 +28,8 @@ export function ApiFormField({
   hideLabels,
   url,
   setFields,
-  onKeyDown
+  onKeyDown,
+  selectAndFocus = false
 }: Readonly<{
   fieldName: string;
   definition: ApiFormFieldType;
@@ -37,6 +38,7 @@ export function ApiFormField({
   url?: string;
   setFields?: React.Dispatch<React.SetStateAction<ApiFormFieldSet>>;
   onKeyDown?: (value: any) => void;
+  selectAndFocus?: boolean;
 }>) {
   const fieldId = useId();
   const controller = useController({
@@ -191,6 +193,7 @@ export function ApiFormField({
             onChange={(value: any) => {
               onChange(value);
             }}
+            selectAndFocus={selectAndFocus}
           />
         );
       case 'choice':

src/frontend/src/components/forms/fields/NumberField.tsx

@@ -1,5 +1,5 @@
 import { NumberInput } from '@mantine/core';
-import { useId, useMemo } from 'react';
+import { useEffect, useId, useMemo, useRef } from 'react';
 import type { FieldValues, UseControllerReturn } from 'react-hook-form';
 import AutoFillRightSection, { AutoFillWarning } from './AutoFillRightSection';
 
@@ -14,7 +14,8 @@ export default function NumberField({
   placeholderAutofill,
   placeholderWarningCompare,
   placeholderWarning,
-  onChange
+  onChange,
+  selectAndFocus = false
 }: Readonly<{
   controller: UseControllerReturn<FieldValues, any>;
   definition: any;
@@ -23,8 +24,11 @@ export default function NumberField({
   placeholderWarningCompare?: number | string;
   placeholderWarning?: string;
   onChange: (value: any) => void;
+  selectAndFocus?: boolean;
 }>) {
   const fieldId = useId();
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
   const {
     field,
     fieldState: { error }
@@ -60,6 +64,18 @@ export default function NumberField({
     return val;
   }, [definition.field_type, value]);
 
+  useEffect(() => {
+    if (!selectAndFocus) return;
+    if (!inputRef.current) return;
+
+    inputRef.current.focus();
+    requestAnimationFrame(() => {
+      const el = inputRef.current;
+      if (!el) return;
+      el.setSelectionRange(0, el.value.length);
+    });
+  }, [selectAndFocus]);
+
   const rightSection = useMemo(() => {
     if (
       definition.placeholder &&
@@ -101,7 +117,10 @@ export default function NumberField({
     <NumberInput
       {...definition}
       radius={'sm'}
-      ref={field.ref}
+      ref={(node) => {
+        inputRef.current = node;
+        field.ref(node);
+      }}
       id={fieldId}
       aria-label={`number-field-${field.name}`}
       error={definition.error ?? error?.message}

src/frontend/src/forms/StockForms.tsx

@@ -557,6 +557,7 @@
   setMax?: boolean;
   merge?: boolean;
   record?: any;
+  focusAndSelect?: boolean;
 }) {
   const statusOptions: ApiFormFieldChoice[] = useMemo(() => {
     return (
@@ -659,6 +660,7 @@
           <Table.Td>
             <StandaloneField
               fieldName='quantity'
+              selectAndFocus={true}
               fieldDefinition={{
                 field_type: 'number',
                 value: quantity,
@@ -1215,7 +1217,8 @@
   title,
   preFormContent,
   successMessage,
-  modalFunc = useCreateApiFormModal
+  modalFunc = useCreateApiFormModal,
+  onOpen
 }: {
   items?: object;
   pk?: number;
@@ -1228,6 +1231,7 @@
   preFormContent?: JSX.Element;
   successMessage?: string;
   modalFunc?: apiModalFunc;
+  onOpen?: () => void;
 }) {
   const baseParams: any = {
     part_detail: true,
@@ -1284,7 +1288,10 @@
     successMessage: successMessage,
     onFormSuccess: () => refresh(),
     onClose: () => setOpened(false),
-    onOpen: () => setOpened(true)
+    onOpen: () => {
+      setOpened(true);
+      onOpen?.();
+    }
   });
 }
 
@@ -1299,7 +1306,17 @@
       <Alert color='blue'>
         {t`Increase the quantity of the selected stock items by a given amount.`}
       </Alert>
-    )
+    ),
+    onOpen: () => {
+      setTimeout(() => {
+        const input = document.querySelector<HTMLInputElement>(
+          '#number-field-quantity, input[aria-label="number-field-quantity"]'
+        );
+
+        input?.focus();
+        input?.select();
+      }, 0);
+    }
   });
 }
 
@@ -1314,7 +1331,17 @@
       <Alert color='blue'>
         {t`Decrease the quantity of the selected stock items by a given amount.`}
       </Alert>
-    )
+    ),
+    onOpen: () => {
+      setTimeout(() => {
+        const input = document.querySelector<HTMLInputElement>(
+          'input[aria-label="number-field-quantity"]'
+        );
+
+        input?.focus();
+        input?.select();
+      }, 0);
+    }
   });
 }
 
@@ -1359,7 +1386,17 @@
       <Alert color='blue'>
         {t`Count the selected stock items, and adjust the quantity accordingly.`}
       </Alert>
-    )
+    ),
+    onOpen: () => {
+      setTimeout(() => {
+        const input = document.querySelector<HTMLInputElement>(
+          'input[aria-label="number-field-quantity"]'
+        );
+
+        input?.focus();
+        input?.select();
+      }, 0);
+    }
   });
 }