frontend/src/screens/Requisitions.jsx

@@ -349,6 +349,7 @@ function toPayload(f) {
   const body = {
     position: {
       department_id: emptyToNull(f.department_id),
+      department: emptyToNull(f.department_name),
       title: emptyToNull(f.title),
       date: emptyToNull(f.date),
       date_needed: emptyToNull(f.date_needed),
@@ -458,7 +459,10 @@ function RequisitionEditor({ row, allowed, onClose, onSaved, toast }) {
                 <label>From (Dept.)</label>
                 <DepartmentSelect
                   value={fields.department_id}
-                  onChange={(id) => set('department_id', id)}
+                  onChange={(id, name) => {
+                    set('department_id', id)
+                    set('department_name', name)
+                  }}
                   fallbackName={fields.department_name}
                 />
               </div>

frontend/src/ui/DepartmentSelect.jsx

@@ -2,7 +2,7 @@
    DepartmentSelect — the "From (Dept.)" / "Department" picker.
 
    Wraps SearchSelect over GET /department/names (`{data:[{id,name}]}`) and
-   stores the department's id, never its name. The server filters on `search`,
+   hands back both the department's id and its name. The server filters on `search`,
    so typing is debounced and SearchSelect is told not to filter again locally.
    ============================================================ */
 
@@ -15,7 +15,7 @@ import * as departmentsApi from '../api/departments'
 
 /**
  * @param value         selected department id, '' when none
- * @param onChange      (id) => void — receives '' when cleared
+ * @param onChange      (id, name) => void — receives ('', '') when cleared
  * @param fallbackName  name of the saved department, used only to label it when
  *                      the list does not contain it (see below)
  */
@@ -53,7 +53,7 @@ export default function DepartmentSelect({ value, onChange, fallbackName = '', d
       <SearchSelect
         options={options}
         value={value}
-        onChange={onChange}
+        onChange={(id) => onChange(id, options.find((d) => String(d.id) === String(id))?.name ?? '')}
         onQueryChange={setQ}
         placeholder="Search departments…"
         disabled={disabled}