From b49f75724b8cd9c1d338f123267e0f93a62fd8cc Mon Sep 17 00:00:00 2001
From: "tom.davies" <thomas.davies@sage.com>
Date: Tue, 26 Sep 2023 16:30:39 +0100
Subject: [PATCH] fix(textarea, textbox): remove `enforceCharacterLimit` from
 textbox based inputs and textarea

due to accessibility concerns the `enforceCharacterLimit` prop has been removed and is no longer
supported. By enforcing a character limit and limiting an input users may not recieve appropriate
feedback of the limit. This can be especially problematic for individuals who rely on assistive
technologies or alternative communication methods

BREAKING CHANGE: The `enforceCharacterLimit` prop has been completely removed and is no longer
supported. We recommend providing adequate feedback to users when they have exceeded the set
`characterLimit` instead
---
 cypress/components/number/number.cy.tsx       | 36 +---------
 cypress/components/textarea/textarea.cy.tsx   | 66 ++-----------------
 cypress/components/textbox/textbox.cy.tsx     | 59 ++---------------
 src/components/date/date.component.tsx        |  1 -
 src/components/date/date.stories.mdx          |  1 -
 src/components/password/password.stories.tsx  |  1 -
 .../textarea/textarea-test.stories.tsx        |  1 -
 .../textarea/textarea.component.tsx           |  9 +--
 src/components/textarea/textarea.stories.mdx  |  8 ---
 src/components/textarea/textarea.stories.tsx  | 21 ------
 .../textbox/textbox-test.stories.tsx          |  1 -
 src/components/textbox/textbox.component.tsx  |  9 +--
 src/components/textbox/textbox.spec.tsx       | 29 +-------
 src/components/textbox/textbox.stories.tsx    |  2 -
 .../useCharacterCount.spec.tsx                | 56 ++--------------
 .../useCharacterCount/useCharacterCount.tsx   |  6 +-
 16 files changed, 23 insertions(+), 283 deletions(-)

diff --git a/cypress/components/number/number.cy.tsx b/cypress/components/number/number.cy.tsx
index b1788b1a8c..c071bb7c9b 100644
--- a/cypress/components/number/number.cy.tsx
+++ b/cypress/components/number/number.cy.tsx
@@ -81,37 +81,6 @@ context("Tests for Number component", () => {
       }
     );
 
-    it.each([
-      [11, 11],
-      [10, 10],
-    ])(
-      "should input %s characters and enforce character limit of %s in Number",
-      (charactersUsed, limit) => {
-        const inputValue = "12345678901";
-        const underCharacters =
-          limit - charactersUsed === 1 ? "character" : "characters";
-        const overCharacters =
-          charactersUsed - limit === 1 ? "character" : "characters";
-
-        CypressMountWithProviders(
-          <NumberInputComponent enforceCharacterLimit characterLimit={limit} />
-        );
-
-        commonDataElementInputPreview()
-          .type(inputValue)
-          .then(() => {
-            characterCount().should(
-              "have.text",
-              `${
-                charactersUsed - limit
-                  ? `${limit - charactersUsed} ${overCharacters} too many`
-                  : `${charactersUsed - limit} ${underCharacters} left`
-              }`
-            );
-          });
-      }
-    );
-
     it.each([
       [11, 11, "rgba(0, 0, 0, 0.55)"],
       [11, 10, "rgb(203, 55, 74)"],
@@ -125,10 +94,7 @@ context("Tests for Number component", () => {
           charactersUsed - limit === 1 ? "character" : "characters";
 
         CypressMountWithProviders(
-          <NumberInputComponent
-            enforceCharacterLimit={false}
-            characterLimit={limit}
-          />
+          <NumberInputComponent characterLimit={limit} />
         );
 
         commonDataElementInputPreview()
diff --git a/cypress/components/textarea/textarea.cy.tsx b/cypress/components/textarea/textarea.cy.tsx
index ecb649de82..d365f18293 100644
--- a/cypress/components/textarea/textarea.cy.tsx
+++ b/cypress/components/textarea/textarea.cy.tsx
@@ -190,12 +190,7 @@ context("Tests for Textarea component", () => {
         const overCharacters =
           charactersUsed - limit === 1 ? "character" : "characters";
 
-        CypressMountWithProviders(
-          <TextareaComponent
-            enforceCharacterLimit={false}
-            characterLimit={limit}
-          />
-        );
+        CypressMountWithProviders(<TextareaComponent characterLimit={limit} />);
 
         textareaChildren()
           .type(inputValue)
@@ -229,12 +224,7 @@ context("Tests for Textarea component", () => {
     ])(
       "input hint should be conditionally rendered",
       (inputHint, renderStatus) => {
-        CypressMountWithProviders(
-          <TextareaComponent
-            enforceCharacterLimit={false}
-            inputHint={inputHint}
-          />
-        );
+        CypressMountWithProviders(<TextareaComponent inputHint={inputHint} />);
 
         getDataElementByValue("input-hint").should(renderStatus);
       }
@@ -247,10 +237,7 @@ context("Tests for Textarea component", () => {
       "character counter should be conditionally rendered",
       (characterLimit, renderStatus) => {
         CypressMountWithProviders(
-          <TextareaComponent
-            enforceCharacterLimit={false}
-            characterLimit={characterLimit}
-          />
+          <TextareaComponent characterLimit={characterLimit} />
         );
 
         characterCount().should(renderStatus);
@@ -264,10 +251,7 @@ context("Tests for Textarea component", () => {
       "visually hidden character count should be conditionally rendered",
       (characterLimit, renderStatus) => {
         CypressMountWithProviders(
-          <TextareaComponent
-            enforceCharacterLimit={false}
-            characterLimit={characterLimit}
-          />
+          <TextareaComponent characterLimit={characterLimit} />
         );
 
         visuallyHiddenCharacterCount().should(renderStatus);
@@ -281,10 +265,7 @@ context("Tests for Textarea component", () => {
       "visually hidden hint should be conditionally rendered",
       (characterLimit, renderStatus) => {
         CypressMountWithProviders(
-          <TextareaComponent
-            enforceCharacterLimit={false}
-            characterLimit={characterLimit}
-          />
+          <TextareaComponent characterLimit={characterLimit} />
         );
 
         visuallyHiddenHint().should(renderStatus);
@@ -312,37 +293,6 @@ context("Tests for Textarea component", () => {
         .should("have.css", "max-width", "100%");
     });
 
-    it.each([
-      [11, 11],
-      [10, 10],
-    ])(
-      "should input %s characters and enforce character limit of %s in Textarea",
-      (charactersUsed, limit) => {
-        const inputValue = "12345678901";
-        const underCharacters =
-          limit - charactersUsed === 1 ? "character" : "characters";
-        const overCharacters =
-          charactersUsed - limit === 1 ? "character" : "characters";
-
-        CypressMountWithProviders(
-          <TextareaComponent enforceCharacterLimit characterLimit={limit} />
-        );
-
-        textareaChildren()
-          .type(inputValue)
-          .then(() => {
-            characterCount().should(
-              "have.text",
-              `${
-                charactersUsed - limit
-                  ? `${limit - charactersUsed} ${underCharacters} too many`
-                  : `${charactersUsed - limit} ${overCharacters} left`
-              }`
-            );
-          });
-      }
-    );
-
     it("should render Textarea with name prop", () => {
       CypressMountWithProviders(
         <TextareaComponent name={CHARACTERS.STANDARD} />
@@ -793,12 +743,6 @@ context("Tests for Textarea component", () => {
       cy.checkAccessibility();
     });
 
-    it("should pass accessibility tests for Textarea UnenforcedCharacterLimitStory", () => {
-      CypressMountWithProviders(<stories.UnenforcedCharacterLimitStory />);
-
-      cy.checkAccessibility();
-    });
-
     it("should pass accessibility tests for Textarea ValidationBooleanStory", () => {
       CypressMountWithProviders(<stories.ValidationBooleanStory />);
 
diff --git a/cypress/components/textbox/textbox.cy.tsx b/cypress/components/textbox/textbox.cy.tsx
index e4227a6add..989eefa888 100644
--- a/cypress/components/textbox/textbox.cy.tsx
+++ b/cypress/components/textbox/textbox.cy.tsx
@@ -229,10 +229,7 @@ context("Tests for Textbox component", () => {
       "input hint should be conditionally rendered",
       (inputHint, renderStatus) => {
         CypressMountWithProviders(
-          <stories.TextboxComponent
-            enforceCharacterLimit={false}
-            inputHint={inputHint}
-          />
+          <stories.TextboxComponent inputHint={inputHint} />
         );
 
         getDataElementByValue("input-hint").should(renderStatus);
@@ -246,10 +243,7 @@ context("Tests for Textbox component", () => {
       "character counter should be conditionally rendered",
       (characterLimit, renderStatus) => {
         CypressMountWithProviders(
-          <stories.TextboxComponent
-            enforceCharacterLimit={false}
-            characterLimit={characterLimit}
-          />
+          <stories.TextboxComponent characterLimit={characterLimit} />
         );
 
         characterCount().should(renderStatus);
@@ -263,10 +257,7 @@ context("Tests for Textbox component", () => {
       "visually hidden character count should be conditionally rendered",
       (characterLimit, renderStatus) => {
         CypressMountWithProviders(
-          <stories.TextboxComponent
-            enforceCharacterLimit={false}
-            characterLimit={characterLimit}
-          />
+          <stories.TextboxComponent characterLimit={characterLimit} />
         );
 
         visuallyHiddenCharacterCount().should(renderStatus);
@@ -280,10 +271,7 @@ context("Tests for Textbox component", () => {
       "visually hidden hint should be conditionally rendered",
       (characterLimit, renderStatus) => {
         CypressMountWithProviders(
-          <stories.TextboxComponent
-            enforceCharacterLimit={false}
-            characterLimit={characterLimit}
-          />
+          <stories.TextboxComponent characterLimit={characterLimit} />
         );
 
         visuallyHiddenHint().should(renderStatus);
@@ -332,10 +320,7 @@ context("Tests for Textbox component", () => {
           charactersUsed - limit === 1 ? "character" : "characters";
 
         CypressMountWithProviders(
-          <stories.TextboxComponent
-            enforceCharacterLimit={false}
-            characterLimit={limit}
-          />
+          <stories.TextboxComponent characterLimit={limit} />
         );
 
         textboxInput()
@@ -364,40 +349,6 @@ context("Tests for Textbox component", () => {
       }
     );
 
-    it.each([
-      [11, 11],
-      [10, 10],
-    ])(
-      "should input %s characters and enforce character limit of %s in Textbox",
-      (charactersUsed, limit) => {
-        const inputValue = "12345678901";
-        const underCharacters =
-          limit - charactersUsed === 1 ? "character" : "characters";
-        const overCharacters =
-          charactersUsed - limit === 1 ? "character" : "characters";
-
-        CypressMountWithProviders(
-          <stories.TextboxComponent
-            enforceCharacterLimit
-            characterLimit={limit}
-          />
-        );
-
-        textboxInput()
-          .type(inputValue)
-          .then(() => {
-            characterCount().should(
-              "have.text",
-              `${
-                charactersUsed - limit
-                  ? `${limit - charactersUsed} ${overCharacters} too many`
-                  : `${charactersUsed - limit} ${underCharacters} left`
-              }`
-            );
-          });
-      }
-    );
-
     it("should render Textbox with name prop", () => {
       CypressMountWithProviders(
         <stories.TextboxComponent name={CHARACTERS.STANDARD} />
diff --git a/src/components/date/date.component.tsx b/src/components/date/date.component.tsx
index bd24aa46ee..ae7fd4b7e6 100644
--- a/src/components/date/date.component.tsx
+++ b/src/components/date/date.component.tsx
@@ -66,7 +66,6 @@ export interface DateInputProps
     | "placeholder"
     | "iconOnClick"
     | "iconOnMouseDown"
-    | "enforceCharacterLimit"
     | "characterLimit"
     | "warnOverLimit"
     | "iconTabIndex"
diff --git a/src/components/date/date.stories.mdx b/src/components/date/date.stories.mdx
index cb2af73c31..58457af0d9 100644
--- a/src/components/date/date.stories.mdx
+++ b/src/components/date/date.stories.mdx
@@ -207,7 +207,6 @@ the German (`de`) locale whilst the second is for a Chinese (`zh-CN`) locale. Re
     "placeholder",
     "iconOnClick",
     "iconOnMouseDown",
-    "enforceCharacterLimit",
     "characterLimit",
     "prefix",
     "inputIcon",
diff --git a/src/components/password/password.stories.tsx b/src/components/password/password.stories.tsx
index eac8be7f58..d32e2c149f 100644
--- a/src/components/password/password.stories.tsx
+++ b/src/components/password/password.stories.tsx
@@ -59,7 +59,6 @@ export const CharacterCounter = () => {
       value={state}
       characterLimit={10}
       onChange={setValue}
-      enforceCharacterLimit={false}
     />
   );
 };
diff --git a/src/components/textarea/textarea-test.stories.tsx b/src/components/textarea/textarea-test.stories.tsx
index 1a0e3ca489..9bbf465852 100644
--- a/src/components/textarea/textarea-test.stories.tsx
+++ b/src/components/textarea/textarea-test.stories.tsx
@@ -104,7 +104,6 @@ export default {
     fieldHelp: "",
     characterLimit: undefined,
     inputWidth: 100,
-    enforceCharacterLimit: true,
     label: "Textarea",
     labelHelp: "",
     labelInline: false,
diff --git a/src/components/textarea/textarea.component.tsx b/src/components/textarea/textarea.component.tsx
index 78b23ee1b6..f440061a95 100644
--- a/src/components/textarea/textarea.component.tsx
+++ b/src/components/textarea/textarea.component.tsx
@@ -51,8 +51,6 @@ export interface TextareaProps
   cols?: number;
   /** If true, the component will be disabled */
   disabled?: boolean;
-  /** Stop the user typing over the characterLimit */
-  enforceCharacterLimit?: boolean;
   /** Indicate that error has occurred
   Pass string to display icon, tooltip and red border
   Pass true boolean to only display red border */
@@ -136,7 +134,6 @@ export const Textarea = React.forwardRef(
       size,
       children,
       characterLimit,
-      enforceCharacterLimit = true,
       onChange,
       disabled = false,
       labelInline,
@@ -254,10 +251,9 @@ export const Textarea = React.forwardRef(
       fieldHelp,
     });
 
-    const [maxLength, characterCount, visuallyHiddenHintId] = useCharacterCount(
+    const [characterCount, visuallyHiddenHintId] = useCharacterCount(
       value,
-      characterLimit,
-      enforceCharacterLimit
+      characterLimit
     );
 
     useEffect(() => {
@@ -323,7 +319,6 @@ export const Textarea = React.forwardRef(
           name={name}
           value={value}
           ref={callbackRef}
-          maxLength={maxLength}
           onChange={onChange}
           disabled={disabled}
           readOnly={readOnly}
diff --git a/src/components/textarea/textarea.stories.mdx b/src/components/textarea/textarea.stories.mdx
index 43613da414..b2552152ac 100644
--- a/src/components/textarea/textarea.stories.mdx
+++ b/src/components/textarea/textarea.stories.mdx
@@ -90,14 +90,6 @@ as it forces a pause before any other announcements, this well help screen reade
   <Story name="with characterLimit" story={stories.CharacterLimitStory} />
 </Canvas>
 
-### With characterLimit - not enforced
-
-<Canvas>
-  <Story
-    name="with characterLimit - not enforced"
-    story={stories.UnenforcedCharacterLimitStory}
-  />
-</Canvas>
 
 ### with characterLimit - with translations
 
diff --git a/src/components/textarea/textarea.stories.tsx b/src/components/textarea/textarea.stories.tsx
index db79bd95fe..bb3b65d3d9 100644
--- a/src/components/textarea/textarea.stories.tsx
+++ b/src/components/textarea/textarea.stories.tsx
@@ -70,26 +70,6 @@ export const CharacterLimitStory: ComponentStory<typeof Textarea> = () => {
   );
 };
 
-export const UnenforcedCharacterLimitStory: ComponentStory<
-  typeof Textarea
-> = () => {
-  const [value, setValue] = useState("");
-  return (
-    <Textarea
-      label="Textarea"
-      inputHint="Hint text (optional)."
-      expandable
-      value={value}
-      onChange={({ target }) => setValue(target.value)}
-      characterLimit={50}
-      enforceCharacterLimit={false}
-    />
-  );
-};
-UnenforcedCharacterLimitStory.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-
 export const TranslationsCharacterLimitStory: ComponentStory<
   typeof Textarea
 > = () => {
@@ -119,7 +99,6 @@ export const TranslationsCharacterLimitStory: ComponentStory<
         value={value}
         onChange={({ target }) => setValue(target.value)}
         characterLimit={50}
-        enforceCharacterLimit={false}
       />
     </I18nProvider>
   );
diff --git a/src/components/textbox/textbox-test.stories.tsx b/src/components/textbox/textbox-test.stories.tsx
index 5870c8a3ee..17ba005373 100644
--- a/src/components/textbox/textbox-test.stories.tsx
+++ b/src/components/textbox/textbox-test.stories.tsx
@@ -30,7 +30,6 @@ export const getCommonTextboxArgs = (
     size: "medium",
     inputIcon: undefined,
     required: false,
-    enforceCharacterLimit: false,
     characterLimit: undefined,
     error: "",
     warning: "",
diff --git a/src/components/textbox/textbox.component.tsx b/src/components/textbox/textbox.component.tsx
index 38dd729726..c2be4d911b 100644
--- a/src/components/textbox/textbox.component.tsx
+++ b/src/components/textbox/textbox.component.tsx
@@ -124,8 +124,6 @@ export interface TextboxProps extends CommonTextboxProps {
   positionedChildren?: React.ReactNode;
   /** Character limit of the textarea */
   characterLimit?: number;
-  /** Stop the user typing over the characterLimit */
-  enforceCharacterLimit?: boolean;
 }
 
 let deprecateInputRefWarnTriggered = false;
@@ -183,7 +181,6 @@ export const Textbox = React.forwardRef(
       "data-component": dataComponent,
       "data-element": dataElement,
       "data-role": dataRole,
-      enforceCharacterLimit = true,
       characterLimit,
       helpAriaLabel,
       ...props
@@ -194,10 +191,9 @@ export const Textbox = React.forwardRef(
 
     const [uniqueId, uniqueName] = useUniqueId(id, name);
 
-    const [maxLength, characterCount, visuallyHiddenHintId] = useCharacterCount(
+    const [characterCount, visuallyHiddenHintId] = useCharacterCount(
       characterCountValue,
-      characterLimit,
-      enforceCharacterLimit
+      characterLimit
     );
     const { validationRedesignOptIn } = useContext(NewValidationContext);
     const { disableErrorBorder } = useContext(NumeralDateContext);
@@ -289,7 +285,6 @@ export const Textbox = React.forwardRef(
           placeholder={disabled || readOnly ? "" : placeholder}
           readOnly={readOnly}
           value={typeof formattedValue === "string" ? formattedValue : value}
-          maxLength={maxLength}
           validationIconId={validationRedesignOptIn ? undefined : validationId}
           {...props}
         />
diff --git a/src/components/textbox/textbox.spec.tsx b/src/components/textbox/textbox.spec.tsx
index b5af9913c2..15b373b4c4 100644
--- a/src/components/textbox/textbox.spec.tsx
+++ b/src/components/textbox/textbox.spec.tsx
@@ -146,13 +146,7 @@ describe("Textbox", () => {
     });
 
     it("renders a counter with an over limit warning", () => {
-      wrapper = mount(
-        <Textbox
-          value="test string"
-          characterLimit={10}
-          enforceCharacterLimit={false}
-        />
-      );
+      wrapper = mount(<Textbox value="test string" characterLimit={10} />);
 
       assertStyleMatch(
         {
@@ -163,27 +157,6 @@ describe("Textbox", () => {
     });
   });
 
-  it.each([[2, 3, 4]])("sets max length", (characterLimit) => {
-    const valueString = "foo";
-    const limitMinusValue = characterLimit - valueString.length >= 0;
-    const wrapper = mount(
-      <Textbox value={valueString} characterLimit={characterLimit} />
-    );
-    const underCharacters =
-      characterLimit - valueString.length === 1 ? "character" : "characters";
-    const overCharacters =
-      valueString.length - characterLimit === 1 ? "character" : "characters";
-
-    expect(wrapper.find(StyledCharacterCount).text()).toBe(
-      `${
-        limitMinusValue
-          ? `${characterLimit - valueString.length} ${underCharacters} left`
-          : `${valueString.length - characterLimit} ${overCharacters} too many`
-      }`
-    );
-    expect(wrapper.find("input").prop("maxLength")).toBe(characterLimit);
-  });
-
   it.each([
     {
       inputIcon: "search",
diff --git a/src/components/textbox/textbox.stories.tsx b/src/components/textbox/textbox.stories.tsx
index da87fcdaf5..74ce1d4b80 100644
--- a/src/components/textbox/textbox.stories.tsx
+++ b/src/components/textbox/textbox.stories.tsx
@@ -29,7 +29,6 @@ export const CharacterCounter: ComponentStory<typeof Textbox> = () => {
       value={state}
       onChange={setValue}
       characterLimit={10}
-      enforceCharacterLimit={false}
     />
   );
 };
@@ -65,7 +64,6 @@ export const CharacterCounterTranslations: ComponentStory<
         value={state}
         onChange={setValue}
         characterLimit={10}
-        enforceCharacterLimit={false}
       />
     </I18nProvider>
   );
diff --git a/src/hooks/__internal__/useCharacterCount/useCharacterCount.spec.tsx b/src/hooks/__internal__/useCharacterCount/useCharacterCount.spec.tsx
index 0d1ca39b4c..1f20af11c5 100644
--- a/src/hooks/__internal__/useCharacterCount/useCharacterCount.spec.tsx
+++ b/src/hooks/__internal__/useCharacterCount/useCharacterCount.spec.tsx
@@ -9,26 +9,12 @@ import useCharacterCount from ".";
 interface TestComponentProps {
   value: string;
   characterLimit?: number;
-  enforceCharacterLimit?: boolean;
 }
 
-const TestComponent = ({
-  value,
-  characterLimit,
-  enforceCharacterLimit,
-}: TestComponentProps) => {
-  const [maxLength, characterCount] = useCharacterCount(
-    value,
-    characterLimit,
-    enforceCharacterLimit
-  );
+const TestComponent = ({ value, characterLimit }: TestComponentProps) => {
+  const [characterCount] = useCharacterCount(value, characterLimit);
 
-  return (
-    <>
-      {characterCount}
-      <span data-element="max-length">{maxLength}</span>
-    </>
-  );
+  return characterCount;
 };
 
 const render = (props: TestComponentProps, params?: MountRendererProps) =>
@@ -37,7 +23,7 @@ const mockValue = "test string";
 
 describe("useCharacterCount", () => {
   it.each([5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15])(
-    "returns a counter and no maxLength",
+    "returns a character counter",
     (characterLimit) => {
       const limitMinusVlaue = characterLimit - mockValue.length >= 0;
       const underCharacters =
@@ -47,37 +33,8 @@ describe("useCharacterCount", () => {
       const wrapper = render({
         value: mockValue,
         characterLimit,
-        enforceCharacterLimit: false,
       });
 
-      expect(wrapper.find('[data-element="max-length"]').text()).toBe("");
-      expect(wrapper.find(StyledCharacterCount).text()).toBe(
-        `${
-          limitMinusVlaue
-            ? `${characterLimit - mockValue.length} ${underCharacters} left`
-            : `${mockValue.length - characterLimit} ${overCharacters} too many`
-        }`
-      );
-    }
-  );
-
-  it.each([5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15])(
-    "returns a counter and maxLength",
-    (characterLimit) => {
-      const limitMinusVlaue = characterLimit - mockValue.length >= 0;
-      const underCharacters =
-        characterLimit - mockValue.length === 1 ? "character" : "characters";
-      const overCharacters =
-        mockValue.length - characterLimit === 1 ? "character" : "characters";
-      const wrapper = render({
-        value: mockValue,
-        characterLimit,
-        enforceCharacterLimit: true,
-      });
-
-      expect(wrapper.find('[data-element="max-length"]').text()).toBe(
-        `${characterLimit}`
-      );
       expect(wrapper.find(StyledCharacterCount).text()).toBe(
         `${
           limitMinusVlaue
@@ -88,12 +45,11 @@ describe("useCharacterCount", () => {
     }
   );
 
-  it("does not return a counter and no maxLength", () => {
+  it("does not return a counter", () => {
     const wrapper = render({
       value: mockValue,
     });
 
-    expect(wrapper.find('[data-element="max-length"]').text()).toBe("");
     expect(wrapper.find(StyledCharacterCount).exists()).toBe(false);
   });
 });
@@ -105,7 +61,6 @@ describe("Debounce tests", () => {
     const wrapper = render({
       value: "",
       characterLimit: 5,
-      enforceCharacterLimit: true,
     });
 
     wrapper.setProps({ value: "foo" });
@@ -123,7 +78,6 @@ describe("Debounce tests", () => {
     const wrapper = render({
       value: "",
       characterLimit: 5,
-      enforceCharacterLimit: true,
     });
 
     wrapper.setProps({ value: "foo" });
diff --git a/src/hooks/__internal__/useCharacterCount/useCharacterCount.tsx b/src/hooks/__internal__/useCharacterCount/useCharacterCount.tsx
index b0ba35d1e3..29831be53d 100644
--- a/src/hooks/__internal__/useCharacterCount/useCharacterCount.tsx
+++ b/src/hooks/__internal__/useCharacterCount/useCharacterCount.tsx
@@ -5,9 +5,8 @@ import useDebounce from "../useDebounce";
 
 const useCharacterCount = (
   value = "",
-  characterLimit?: number,
-  enforceCharacterLimit = true
-): [number | undefined, JSX.Element | null, string | undefined] => {
+  characterLimit?: number
+): [JSX.Element | null, string | undefined] => {
   const isCharacterLimitValid =
     typeof characterLimit === "number" && !Number.isNaN(characterLimit);
 
@@ -40,7 +39,6 @@ const useCharacterCount = (
   }, [debouncedValue, characterLimit, isCharacterLimitValid]);
 
   return [
-    enforceCharacterLimit && isCharacterLimitValid ? characterLimit : undefined,
     isCharacterLimitValid ? (
       <CharacterCount
         isOverLimit={isOverLimit}