From a7a39ae01a854f5fead46d6dad717d8c6445024c Mon Sep 17 00:00:00 2001
From: Charismatic Claire <charismatic.claire@posteo.org>
Date: Thu, 6 Aug 2026 10:18:36 +0200
Subject: [PATCH] UIOR-1569: Correctly refresh of 'prefix' and 'suffix' field

We add a 'shouldValidate' property to 'FieldPrefix' and 'FieldSuffix',
which is used to determine whether validating the input should be done
or not. This way we do not validate if the 'poNumber' is not editable
and hence accessible to the validators.
---
 src/common/POFields/FieldPrefix.js            |  3 +-
 src/common/POFields/FieldPrefix.test.js       | 35 ++++++++++++++++++-
 src/common/POFields/FieldSuffix.js            |  3 +-
 src/common/POFields/FieldSuffix.test.js       | 34 +++++++++++++++++-
 .../PurchaseOrder/PODetails/PODetailsForm.js  |  2 ++
 5 files changed, 73 insertions(+), 4 deletions(-)

diff --git a/src/common/POFields/FieldPrefix.js b/src/common/POFields/FieldPrefix.js
index 4ed0f5208..0dfd83fe7 100644
--- a/src/common/POFields/FieldPrefix.js
+++ b/src/common/POFields/FieldPrefix.js
@@ -11,6 +11,7 @@ import { PO_FORM_FIELDS } from '../constants';
 const FieldPrefix = ({
   isNonInteractive = false,
   prefixes,
+  shouldValidate,
   ...rest
 }) => {
   return (
@@ -19,7 +20,7 @@ const FieldPrefix = ({
       isNonInteractive={isNonInteractive}
       label={<FormattedMessage id="ui-orders.orderDetails.orderNumberPrefix" />}
       name={PO_FORM_FIELDS.poNumberPrefix}
-      validateFields={[PO_FORM_FIELDS.poNumber]}
+      validateFields={shouldValidate ? [PO_FORM_FIELDS.poNumber] : []}
       {...rest}
     />
   );
diff --git a/src/common/POFields/FieldPrefix.test.js b/src/common/POFields/FieldPrefix.test.js
index 57a15773b..226a4f7ca 100644
--- a/src/common/POFields/FieldPrefix.test.js
+++ b/src/common/POFields/FieldPrefix.test.js
@@ -2,8 +2,21 @@ import { Form } from 'react-final-form';
 
 import { render, screen } from '@folio/jest-config-stripes/testing-library/react';
 
+import { PO_FORM_FIELDS } from '../constants';
 import FieldPrefix from './FieldPrefix';
 
+const mockFieldSelectFinal = jest.fn(({ label }) => label);
+
+jest.mock('@folio/stripes-acq-components', () => {
+  const React = jest.requireActual('react');
+  const PropTypes = jest.requireActual('prop-types');
+
+  return {
+    FieldSelectFinal: (props) => mockFieldSelectFinal(props),
+    fieldSelectOptionsShape: PropTypes.arrayOf(PropTypes.shape({})),
+  };
+});
+
 const defaultProps = {
   prefixes: [],
 };
@@ -21,9 +34,29 @@ const renderFieldPrefix = (props = {}) => render(
 );
 
 describe('FieldPrefix', () => {
-  it('should render \'prefix\' field', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the prefix field', () => {
     renderFieldPrefix();
 
     expect(screen.getByText('ui-orders.orderDetails.orderNumberPrefix')).toBeInTheDocument();
   });
+
+  it('should not validate PO number when shouldValidate is false', () => {
+    renderFieldPrefix({ shouldValidate: false });
+
+    expect(mockFieldSelectFinal).toHaveBeenCalledWith(expect.objectContaining({
+      validateFields: [],
+    }));
+  });
+
+  it('should validate PO number when shouldValidate is true', () => {
+    renderFieldPrefix({ shouldValidate: true });
+
+    expect(mockFieldSelectFinal).toHaveBeenCalledWith(expect.objectContaining({
+      validateFields: [PO_FORM_FIELDS.poNumber],
+    }));
+  });
 });
diff --git a/src/common/POFields/FieldSuffix.js b/src/common/POFields/FieldSuffix.js
index 4316a038f..6c5a8bf63 100644
--- a/src/common/POFields/FieldSuffix.js
+++ b/src/common/POFields/FieldSuffix.js
@@ -11,6 +11,7 @@ import { PO_FORM_FIELDS } from '../constants';
 const FieldSuffix = ({
   isNonInteractive = false,
   suffixes,
+  shouldValidate,
   ...rest
 }) => {
   return (
@@ -19,7 +20,7 @@ const FieldSuffix = ({
       isNonInteractive={isNonInteractive}
       label={<FormattedMessage id="ui-orders.orderDetails.orderNumberSuffix" />}
       name={PO_FORM_FIELDS.poNumberSuffix}
-      validateFields={[PO_FORM_FIELDS.poNumber]}
+      validateFields={shouldValidate ? [PO_FORM_FIELDS.poNumber] : []}
       {...rest}
     />
   );
diff --git a/src/common/POFields/FieldSuffix.test.js b/src/common/POFields/FieldSuffix.test.js
index a80e3beda..6d5d2d315 100644
--- a/src/common/POFields/FieldSuffix.test.js
+++ b/src/common/POFields/FieldSuffix.test.js
@@ -2,8 +2,20 @@ import { Form } from 'react-final-form';
 
 import { render, screen } from '@folio/jest-config-stripes/testing-library/react';
 
+import { PO_FORM_FIELDS } from '../constants';
 import FieldSuffix from './FieldSuffix';
 
+const mockFieldSelectFinal = jest.fn(({ label }) => label);
+
+jest.mock('@folio/stripes-acq-components', () => {
+  const PropTypes = jest.requireActual('prop-types');
+
+  return {
+    FieldSelectFinal: (props) => mockFieldSelectFinal(props),
+    fieldSelectOptionsShape: PropTypes.arrayOf(PropTypes.shape({})),
+  };
+});
+
 const defaultProps = {
   suffixes: [],
 };
@@ -21,9 +33,29 @@ const renderFieldSuffix = (props = {}) => render(
 );
 
 describe('FieldSuffix', () => {
-  it('should render \'suffix\' field', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the suffix field', () => {
     renderFieldSuffix();
 
     expect(screen.getByText('ui-orders.orderDetails.orderNumberSuffix')).toBeInTheDocument();
   });
+
+  it('should not validate PO number when shouldValidate is false', () => {
+    renderFieldSuffix({ shouldValidate: false });
+
+    expect(mockFieldSelectFinal).toHaveBeenCalledWith(expect.objectContaining({
+      validateFields: [],
+    }));
+  });
+
+  it('should validate PO number when shouldValidate is true', () => {
+    renderFieldSuffix({ shouldValidate: true });
+
+    expect(mockFieldSelectFinal).toHaveBeenCalledWith(expect.objectContaining({
+      validateFields: [PO_FORM_FIELDS.poNumber],
+    }));
+  });
 });
diff --git a/src/components/PurchaseOrder/PODetails/PODetailsForm.js b/src/components/PurchaseOrder/PODetails/PODetailsForm.js
index 3c6c513b3..e528164e4 100644
--- a/src/components/PurchaseOrder/PODetails/PODetailsForm.js
+++ b/src/components/PurchaseOrder/PODetails/PODetailsForm.js
@@ -96,6 +96,7 @@ class PODetailsForm extends Component {
               <FieldPrefix
                 isNonInteractive={isPostPendingOrder}
                 prefixes={prefixesSetting}
+                shouldValidate={canUserEditOrderNumber}
               />
             </Col>
           </IfFieldVisible>
@@ -120,6 +121,7 @@ class PODetailsForm extends Component {
               <FieldSuffix
                 isNonInteractive={isPostPendingOrder}
                 suffixes={suffixesSetting}
+                shouldValidate={canUserEditOrderNumber}
               />
             </Col>
           </IfFieldVisible>