fix

apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/bulk.tsx

@@ -20,8 +20,7 @@ import { CoursePicker } from '../_.$orgid.enrollments.add/course-picker'
 import { MAX_ITEMS, type Course } from '../_.$orgid.enrollments.add/data'
 
 const emptyRow = {
-  course: undefined,
-  quantity: undefined
+  course: undefined
 }
 
 type BulkProps = {
@@ -54,8 +53,15 @@ export function Bulk({ courses }: BulkProps) {
     resolver: zodResolver(formSchema),
     defaultValues: { items: [emptyRow] }
   })
-  const { formState, control, handleSubmit, register, setValue, getValues } =
-    form
+  const {
+    formState,
+    control,
+    handleSubmit,
+    register,
+    setValue,
+    getValues,
+    setFocus
+  } = form
   const { fields, remove, append } = useFieldArray({
     control,
     name: 'items'
@@ -96,15 +102,19 @@ export function Bulk({ courses }: BulkProps) {
                   control={control}
                   name={`items.${index}.course`}
                   render={({
-                    field: { name, value, onChange },
+                    field: { name, value, onChange, ref },
                     fieldState
                   }) => (
                     <div className="grid gap-1">
                       <CoursePicker
+                        ref={ref}
+                        name={name}
+                        autoFocus={index === 0}
                         value={value}
                         onChange={onChange}
                         options={courses}
                         error={fieldState.error}
+                        readOnly
                       />
 
                       <ErrorMessage
@@ -139,6 +149,7 @@ export function Bulk({ courses }: BulkProps) {
                   <InputGroupAddon align="inline-end">
                     <InputGroupButton
                       type="button"
+                      tabIndex={-1}
                       size="icon-xs"
                       className="border cursor-pointer"
                       onClick={() => {
@@ -157,6 +168,7 @@ export function Bulk({ courses }: BulkProps) {
                   <InputGroupAddon align="inline-end">
                     <InputGroupButton
                       type="button"
+                      tabIndex={-1}
                       size="icon-xs"
                       className="border cursor-pointer"
                       onClick={() => {
@@ -172,6 +184,7 @@ export function Bulk({ courses }: BulkProps) {
 
                 <InputGroup>
                   <InputGroupInput
+                    tabIndex={-1}
                     className="pointer-events-none"
                     readOnly
                     value={currency.format(course?.unit_price || 0)}
@@ -180,6 +193,7 @@ export function Bulk({ courses }: BulkProps) {
 
                 <InputGroup>
                   <InputGroupInput
+                    tabIndex={-1}
                     className="pointer-events-none"
                     readOnly
                     value={currency.format(
@@ -207,8 +221,13 @@ export function Bulk({ courses }: BulkProps) {
 
         <Button
           type="button"
-          // @ts-ignore
-          onClick={() => append(emptyRow)}
+          onClick={() => {
+            // @ts-ignore
+            append(emptyRow, { shouldFocus: false })
+            queueMicrotask(() => {
+              setFocus(`items.${fields.length}.course`)
+            })
+          }}
           className="cursor-pointer"
           disabled={fields.length == MAX_ITEMS}
           variant="outline"