From 7ab0eab6bbd0c1d4d04e9410a40939ec3014b652 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Rafael=20Siqueira?=
 <osergiosiqueira@gmail.com>
Date: Tue, 23 Dec 2025 13:42:50 -0300
Subject: [PATCH] fix

---
 .../app/routes/_.$orgid.checkout/assigned.tsx |   2 +
 .../app/routes/_.$orgid.checkout/bulk.tsx     |  33 ++-
 .../course-picker.tsx                         | 231 +++++++++---------
 .../routes/_.$orgid.enrollments.add/route.tsx |   1 +
 4 files changed, 150 insertions(+), 117 deletions(-)

diff --git a/apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/assigned.tsx b/apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/assigned.tsx
index c1f95f0..35fea86 100644
--- a/apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/assigned.tsx
+++ b/apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/assigned.tsx
@@ -118,6 +118,7 @@ export function Assigned({ courses }: AssignedProps) {
                         onChange={onChange}
                         options={courses}
                         error={fieldState.error}
+                        readOnly
                       />
 
                       <ErrorMessage
@@ -142,6 +143,7 @@ export function Assigned({ courses }: AssignedProps) {
                 <InputGroup>
                   <InputGroupInput
                     className="pointer-events-none"
+                    tabIndex={-1}
                     readOnly
                     value={currency.format(unit_price)}
                   />
diff --git a/apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/bulk.tsx b/apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/bulk.tsx
index 0913aff..ee1e542 100644
--- a/apps/admin.saladeaula.digital/app/routes/_.$orgid.checkout/bulk.tsx
+++ b/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"
diff --git a/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/course-picker.tsx b/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/course-picker.tsx
index 5cdca5e..4dbb9ed 100644
--- a/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/course-picker.tsx
+++ b/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/course-picker.tsx
@@ -1,4 +1,10 @@
-import { use, useState, useMemo } from 'react'
+import {
+  use,
+  useState,
+  useMemo,
+  forwardRef,
+  type InputHTMLAttributes
+} from 'react'
 import { useToggle } from 'ahooks'
 import Fuse from 'fuse.js'
 import {
@@ -32,124 +38,129 @@ import {
 
 import { type Course } from './data'
 
-interface CoursePickerProps {
+interface CoursePickerProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'value' | 'onChange'
+> {
   value?: Course
   options: Promise<{ hits: any[] }>
   onChange?: (value: any) => void
   error?: any
 }
 
-export function CoursePicker({
-  value,
-  onChange,
-  options,
-  error
-}: CoursePickerProps) {
-  const { hits } = use(options)
-  const [search, setSearch] = useState<string>('')
-  const [open, { set }] = useToggle()
-  const [sort, { toggle }] = useToggle('a-z', 'z-a')
-  const fuse = useMemo(() => {
-    return new Fuse(hits, {
-      keys: ['name'],
-      threshold: 0.3,
-      includeMatches: true
-    })
-  }, [hits])
+export const CoursePicker = forwardRef<HTMLInputElement, CoursePickerProps>(
+  ({ value, onChange, options, error, ...props }, ref) => {
+    const { hits } = use(options)
+    const [search, setSearch] = useState<string>('')
+    const [open, { set }] = useToggle()
+    const [sort, { toggle }] = useToggle('a-z', 'z-a')
+    const fuse = useMemo(() => {
+      return new Fuse(hits, {
+        keys: ['name'],
+        threshold: 0.3,
+        includeMatches: true
+      })
+    }, [hits])
 
-  const filtered = useMemo(() => {
-    const results = !search ? hits : fuse.search(search).map(({ item }) => item)
+    const filtered = useMemo(() => {
+      const results = !search
+        ? hits
+        : fuse.search(search).map(({ item }) => item)
 
-    return results.sort((a, b) => {
-      const comparison = a.name.localeCompare(b.name)
-      return sort === 'a-z' ? comparison : -comparison
-    })
-  }, [search, fuse, hits, sort])
+      return results.sort((a, b) => {
+        const comparison = a.name.localeCompare(b.name)
+        return sort === 'a-z' ? comparison : -comparison
+      })
+    }, [search, fuse, hits, sort])
 
-  return (
-    <Popover open={open} onOpenChange={set}>
-      <PopoverTrigger asChild>
-        <InputGroup>
-          <InputGroupInput
-            readOnly
-            placeholder="Curso"
-            value={value?.name || ''}
-            aria-invalid={!!error}
-          />
-          <InputGroupAddon>
-            <BookIcon />
-          </InputGroupAddon>
-          <InputGroupAddon align="inline-end">
-            <ChevronsUpDownIcon />
-          </InputGroupAddon>
-        </InputGroup>
-      </PopoverTrigger>
+    return (
+      <Popover open={open} onOpenChange={set}>
+        <PopoverTrigger asChild>
+          <InputGroup>
+            <InputGroupInput
+              ref={ref}
+              placeholder="Curso"
+              value={value?.name || ''}
+              aria-invalid={!!error}
+              {...props}
+            />
 
-      <PopoverContent className="lg:w-84 p-0" align="start">
-        <Command shouldFilter={false}>
-          <div className="flex">
-            <div className="flex-1">
-              <CommandInput
-                placeholder="Curso"
-                autoComplete="off"
-                onValueChange={setSearch}
-              />
+            <InputGroupAddon>
+              <BookIcon />
+            </InputGroupAddon>
+
+            <InputGroupAddon align="inline-end">
+              <ChevronsUpDownIcon />
+            </InputGroupAddon>
+          </InputGroup>
+        </PopoverTrigger>
+
+        <PopoverContent className="lg:w-84 p-0" align="start">
+          <Command shouldFilter={false}>
+            <div className="flex">
+              <div className="flex-1">
+                <CommandInput
+                  placeholder="Curso"
+                  autoComplete="off"
+                  onValueChange={setSearch}
+                />
+              </div>
+              <div className="border-b flex items-center justify-end">
+                <Button
+                  variant="link"
+                  size="icon-sm"
+                  tabIndex={-1}
+                  className="cursor-pointer text-muted-foreground"
+                  onClick={toggle}
+                >
+                  {sort == 'a-z' ? <ArrowDownAZIcon /> : <ArrowUpAZIcon />}
+                </Button>
+              </div>
             </div>
-            <div className="border-b flex items-center justify-end">
-              <Button
-                variant="link"
-                size="icon-sm"
-                tabIndex={-1}
-                className="cursor-pointer text-muted-foreground"
-                onClick={toggle}
-              >
-                {sort == 'a-z' ? <ArrowDownAZIcon /> : <ArrowUpAZIcon />}
-              </Button>
-            </div>
-          </div>
-          {/* Force rerender to reset the scroll position  */}
-          <CommandList key={sort}>
-            <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
-            <CommandGroup>
-              {filtered
-                .filter(
-                  ({ metadata__unit_price = 0 }) => metadata__unit_price > 0
-                )
-                .map(
-                  ({
-                    id,
-                    name,
-                    access_period,
-                    metadata__unit_price: unit_price
-                  }) => (
-                    <CommandItem
-                      key={id}
-                      value={id}
-                      className="cursor-pointer"
-                      onSelect={() => {
-                        onChange?.({
-                          id,
-                          name,
-                          access_period: Number(access_period),
-                          unit_price: Number(unit_price)
-                        })
-                        set(false)
-                      }}
-                    >
-                      {name}
-                      <CheckIcon
-                        className={cn(
-                          'ml-auto',
-                          value?.id === id ? 'opacity-100' : 'opacity-0'
-                        )}
-                      />
-                    </CommandItem>
+            {/* Force rerender to reset the scroll position  */}
+            <CommandList key={sort}>
+              <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
+              <CommandGroup>
+                {filtered
+                  .filter(
+                    ({ metadata__unit_price = 0 }) => metadata__unit_price > 0
                   )
-                )}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  )
-}
+                  .map(
+                    ({
+                      id,
+                      name,
+                      access_period,
+                      metadata__unit_price: unit_price
+                    }) => (
+                      <CommandItem
+                        key={id}
+                        value={id}
+                        className="cursor-pointer"
+                        onSelect={() => {
+                          onChange?.({
+                            id,
+                            name,
+                            access_period: Number(access_period),
+                            unit_price: Number(unit_price)
+                          })
+                          set(false)
+                        }}
+                      >
+                        {name}
+                        <CheckIcon
+                          className={cn(
+                            'ml-auto',
+                            value?.id === id ? 'opacity-100' : 'opacity-0'
+                          )}
+                        />
+                      </CommandItem>
+                    )
+                  )}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    )
+  }
+)
diff --git a/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/route.tsx b/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/route.tsx
index 54fbcc9..74ee4f3 100644
--- a/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/route.tsx
+++ b/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/route.tsx
@@ -263,6 +263,7 @@ export default function Route({
                             onChange={onChange}
                             options={courses}
                             error={fieldState.error}
+                            readOnly
                           />
 
                           <ErrorMessage