diff --git a/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx b/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx
index f3bfe6fab..773881c68 100644
--- a/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx
+++ b/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx
@@ -2,7 +2,7 @@ import { useApolloClient, useMutation } from "@apollo/client/react";
import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
import { Button, Checkbox, Form, Modal, Space } from "antd";
import _ from "lodash";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
@@ -53,6 +53,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
const client = useApolloClient();
const [generateLabel, setGenerateLabel] = useLocalStorage("enter_bill_generate_label", false);
const notification = useNotification();
+ const formTopRef = useRef(null);
const {
treatments: { Enhanced_Payroll, Imgproxy }
@@ -447,13 +448,21 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
autoComplete={"off"}
layout="vertical"
form={form}
- onFinishFailed={() => {
+ onFinishFailed={(errorInfo) => {
setEnterAgain(false);
+ // Scroll to the top of the form to show validation errors
+ if (errorInfo.errorFields && errorInfo.errorFields.length > 0) {
+ setTimeout(() => {
+ formTopRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+ }, 100);
+ }
}}
>
-