Fixes for Errors on BoxCreate

front/src/views/BoxCreate/BoxCreateView.test.tsx

@@ -336,11 +336,27 @@ describe("BoxCreateView", () => {
     const createBoxButton = screen.getByRole("button", { name: /^save$/i });
     await user.click(createBoxButton);
 
-    // Check for validation errors
-    expect(await screen.findByText(/please select a product/i)).toBeInTheDocument();
-    expect(screen.getByText(/please select a size/i)).toBeInTheDocument();
-    expect(screen.getByText(/please select a location/i)).toBeInTheDocument();
-    expect(screen.getByText(/please enter a number of items/i)).toBeInTheDocument();
+    // Check for validation errors only (ignore same placeholder text in fields)
+    expect(
+      await screen.findByText(/please select a product/i, {
+        selector: ".chakra-form__error-message",
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/please select a size/i, {
+        selector: ".chakra-form__error-message",
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/please select a location/i, {
+        selector: ".chakra-form__error-message",
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/please enter a number of items/i, {
+        selector: ".chakra-form__error-message",
+      }),
+    ).toBeInTheDocument();
   });
 
   it("handles API errors during box creation", async () => {

front/src/views/BoxCreate/components/BoxCreate.tsx

@@ -41,32 +41,24 @@ interface ILocationData {
   seq?: number | null | undefined;
 }
 
-const singleSelectOptionSchema = z.object({
+const singleSelectOptionSchema = {
   label: z.string(),
   value: z.string(),
   __isNew__: z.boolean().optional(),
-});
+};
 
 export const CreateBoxFormDataSchema = z.object({
-  // Single Select Fields are a tough nut to validate. This feels like a hacky solution, but the best I could find.
-  // It is based on this example https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-zod-validation-typescript-m1dqme?file=/app.tsx
-  productId: singleSelectOptionSchema
-    // If the Select is empty it returns null. If we put required() here. The error is "expected object, received null". I did not find a way to edit this message. Hence, this solution.
-    .nullable()
-    // We make the field nullable and can then check in the next step if it is empty or not with the refine function.
-    .refine(Boolean, { error: "Please select a product" })
-    // since the expected return type should not have a null we add this transform at the en.
-    .transform((selectedOption) => selectedOption || z.NEVER),
-  sizeId: singleSelectOptionSchema
-    .nullable()
-    .refine(Boolean, { error: "Please select a size" })
-    .transform((selectedOption) => selectedOption || z.NEVER),
+  productId: z.object(singleSelectOptionSchema, {
+    error: (iss) => (iss.input === undefined ? "Please select a product" : "Invalid input."),
+  }),
+  sizeId: z.object(singleSelectOptionSchema, {
+    error: (iss) => (iss.input === undefined ? "Please select a size" : "Invalid input."),
+  }),
   numberOfItems: z.number({ error: "Please enter a number of items" }).int().nonnegative(),
-  locationId: singleSelectOptionSchema
-    .nullable()
-    .refine(Boolean, { error: "Please select a location" })
-    .transform((selectedOption) => selectedOption || z.NEVER),
-  tags: singleSelectOptionSchema.array().optional(),
+  locationId: z.object(singleSelectOptionSchema, {
+    error: (iss) => (iss.input === undefined ? "Please select a location" : "Invalid input."),
+  }),
+  tags: z.object(singleSelectOptionSchema).array().optional(),
   comment: z.string().optional(),
 });
 

front/src/views/Transfers/CreateShipment/CreateShipmentView.test.tsx

@@ -205,10 +205,18 @@ it("4.3.2 - Input Validations", async () => {
   await user.click(submitButton);
   // Test case 4.3.2.1 - Partner Organisation SELECT field cannot be empty
   expect((screen.getByLabelText(/organisation/i) as HTMLInputElement).value).toEqual("");
-  expect(await screen.findByText(/please select an organisation/i)).toBeInTheDocument();
+  expect(
+    await screen.findByText(/please select an organisation/i, {
+      selector: ".chakra-form__error-message",
+    }),
+  ).toBeInTheDocument();
   // Test case 4.3.2.2 - Partner Organisation Base SELECT field cannot be empty
   expect((screen.getByLabelText(/base/i) as HTMLInputElement).value).toEqual("");
-  expect((await screen.findAllByText(/please select a base/i))[0]).toBeInTheDocument();
+  expect(
+    await screen.findByText(/please select a base/i, {
+      selector: ".chakra-form__error-message",
+    }),
+  ).toBeInTheDocument();
 });
 
 // Test case 4.3.3

front/src/views/Transfers/CreateShipment/components/CreateShipment.tsx

@@ -43,24 +43,22 @@ export interface IOrganisationBaseData {
 }
 
 // Define schema of the form
-const singleSelectOptionSchema = z.object({
+const singleSelectOptionSchema = {
   label: z.string(),
   value: z.string(),
-});
+};
 
 const shipmentTargetSchema = z.union([z.literal("partners"), z.literal("currentOrg")]);
 
 // Define validation checks on form by defining the form schema
 export const ShipmentFormSchema = z.object({
   shipmentTarget: shipmentTargetSchema,
-  receivingOrganisation: singleSelectOptionSchema
-    .nullable()
-    .refine(Boolean, { error: "Please select an organisation" })
-    .transform((selectedOption) => selectedOption || { label: "", value: "" }),
-  receivingBase: singleSelectOptionSchema
-    .nullable()
-    .refine(Boolean, { error: "Please select a base" })
-    .transform((selectedOption) => selectedOption || { label: "", value: "" }),
+  receivingOrganisation: z.object(singleSelectOptionSchema, {
+    error: (iss) => (iss.input === undefined ? "Please select an organisation" : "Invalid input."),
+  }),
+  receivingBase: z.object(singleSelectOptionSchema, {
+    error: (iss) => (iss.input === undefined ? "Please select a base" : "Invalid input."),
+  }),
 });
 
 export type ICreateShipmentFormData = z.infer<typeof ShipmentFormSchema>;

front/src/views/Transfers/CreateTransferAgreement/components/CreateTransferAgreement.tsx

@@ -21,21 +21,23 @@ export interface IBasesForOrganisationData {
   bases: IBaseData[];
 }
 
-const singleSelectOptionSchema = z.object({
+const singleSelectOptionSchema = {
   label: z.string(),
   value: z.string(),
-});
+};
 
 export const TransferAgreementFormDataSchema = z
   .object({
-    currentOrganisationSelectedBases: singleSelectOptionSchema
+    currentOrganisationSelectedBases: z
+      .object(singleSelectOptionSchema)
       .array()
       .min(1, "Please select at least one base"),
 
-    partnerOrganisation: singleSelectOptionSchema
-      .refine(Boolean, { error: "Please select a partner organisation" })
-      .transform((selectedOption) => selectedOption || { label: "", value: "" }),
-    partnerOrganisationSelectedBases: singleSelectOptionSchema.array().optional(),
+    partnerOrganisation: z.object(singleSelectOptionSchema, {
+      error: (iss) =>
+        iss.input === undefined ? "Please select a partner organisation" : "Invalid input.",
+    }),
+    partnerOrganisationSelectedBases: z.object(singleSelectOptionSchema).array().optional(),
     validFrom: z
       .date({
         error: (issue) =>