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(
-
- );
-
- 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(
-
+
);
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(
-
- );
+ CypressMountWithProviders();
textareaChildren()
.type(inputValue)
@@ -229,12 +224,7 @@ context("Tests for Textarea component", () => {
])(
"input hint should be conditionally rendered",
(inputHint, renderStatus) => {
- CypressMountWithProviders(
-
- );
+ CypressMountWithProviders();
getDataElementByValue("input-hint").should(renderStatus);
}
@@ -247,10 +237,7 @@ context("Tests for Textarea component", () => {
"character counter should be conditionally rendered",
(characterLimit, renderStatus) => {
CypressMountWithProviders(
-
+
);
characterCount().should(renderStatus);
@@ -264,10 +251,7 @@ context("Tests for Textarea component", () => {
"visually hidden character count should be conditionally rendered",
(characterLimit, renderStatus) => {
CypressMountWithProviders(
-
+
);
visuallyHiddenCharacterCount().should(renderStatus);
@@ -281,10 +265,7 @@ context("Tests for Textarea component", () => {
"visually hidden hint should be conditionally rendered",
(characterLimit, renderStatus) => {
CypressMountWithProviders(
-
+
);
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(
-
- );
-
- 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(
@@ -793,12 +743,6 @@ context("Tests for Textarea component", () => {
cy.checkAccessibility();
});
- it("should pass accessibility tests for Textarea UnenforcedCharacterLimitStory", () => {
- CypressMountWithProviders();
-
- cy.checkAccessibility();
- });
-
it("should pass accessibility tests for Textarea ValidationBooleanStory", () => {
CypressMountWithProviders();
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(
-
+
);
getDataElementByValue("input-hint").should(renderStatus);
@@ -246,10 +243,7 @@ context("Tests for Textbox component", () => {
"character counter should be conditionally rendered",
(characterLimit, renderStatus) => {
CypressMountWithProviders(
-
+
);
characterCount().should(renderStatus);
@@ -263,10 +257,7 @@ context("Tests for Textbox component", () => {
"visually hidden character count should be conditionally rendered",
(characterLimit, renderStatus) => {
CypressMountWithProviders(
-
+
);
visuallyHiddenCharacterCount().should(renderStatus);
@@ -280,10 +271,7 @@ context("Tests for Textbox component", () => {
"visually hidden hint should be conditionally rendered",
(characterLimit, renderStatus) => {
CypressMountWithProviders(
-
+
);
visuallyHiddenHint().should(renderStatus);
@@ -332,10 +320,7 @@ context("Tests for Textbox component", () => {
charactersUsed - limit === 1 ? "character" : "characters";
CypressMountWithProviders(
-
+
);
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(
-
- );
-
- 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(
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
-### With characterLimit - not enforced
-
-
### 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 = () => {
);
};
-export const UnenforcedCharacterLimitStory: ComponentStory<
- typeof Textarea
-> = () => {
- const [value, setValue] = useState("");
- return (
-