From 038f2becf5cb23dfe75f270a7eb1bff2af8a0a67 Mon Sep 17 00:00:00 2001
From: Dominic Baur <dominic.baur@collana.com>
Date: Fri, 13 Mar 2026 13:23:29 +0100
Subject: [PATCH 1/4] Add support for max length

---
 CHANGELOG.md                                  |  4 +++
 .../TelephoneNumberInput.cy.tsx               | 25 +++++++++++++++++++
 src/lib/TelephoneNumberInput.tsx              |  2 +-
 .../TelephoneNumberInputInternal.tsx          |  4 +++
 4 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3aeb9fd..5fb91ed 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- support for max length in `TelephoneNumberInput`.
+
 ## [4.0.0] - 2026-02-24
 
 ### Changed
diff --git a/cypress/cypress/component/TelephoneNumberInput/TelephoneNumberInput.cy.tsx b/cypress/cypress/component/TelephoneNumberInput/TelephoneNumberInput.cy.tsx
index 51e6227..a3a3d77 100644
--- a/cypress/cypress/component/TelephoneNumberInput/TelephoneNumberInput.cy.tsx
+++ b/cypress/cypress/component/TelephoneNumberInput/TelephoneNumberInput.cy.tsx
@@ -88,3 +88,28 @@ it("pinning contries works", () => {
   cy.get(`.MuiAutocomplete-listbox`).children().eq(1).should("contain", "+39");
   cy.get(`.MuiAutocomplete-listbox`).children().eq(2).should("contain", "──");
 });
+
+it("setting a max lenght works", () => {
+  const phoneNumber = faker.phone.number("79#######");
+  const name = faker.random.alpha(10);
+
+  mount(
+    <div className="p-4">
+      <Form onSubmit={cy.spy().as("onSubmitSpy")}>
+        <TelephoneNumberInput
+          name={name}
+          useBootstrapStyle
+          label="Phone Number"
+          defaultCountry="CH"
+          pinnedCountries={["GB", "IT"]}
+          maxLength={9}
+        />
+        <input type="submit" className="mt-4" />
+      </Form>
+    </div>,
+  );
+
+  cy.get(`.MuiInputBase-input`).clear();
+  cy.get(`.MuiInputBase-input`).type(`${phoneNumber} 1`);
+  cy.get(`.MuiInputBase-input`).should("have.value", phoneNumber);
+});
diff --git a/src/lib/TelephoneNumberInput.tsx b/src/lib/TelephoneNumberInput.tsx
index dcae64e..a7e9be5 100644
--- a/src/lib/TelephoneNumberInput.tsx
+++ b/src/lib/TelephoneNumberInput.tsx
@@ -8,7 +8,7 @@ import { RegionCode } from "google-libphonenumber";
 
 interface TelephoneNumberInputProps<T extends FieldValues> extends Omit<
   CommonInputProps<T>,
-  "minLength" | "maxLength" | "addonLeft" | "addonRight" | "name" | "onChange" | "onBlur"
+  "minLength" | "addonLeft" | "addonRight" | "name" | "onChange" | "onBlur"
 > {
   useBootstrapStyle?: boolean;
   name: FieldPathByValue<T, string | undefined>;
diff --git a/src/lib/components/TelephoneNumberInput/TelephoneNumberInputInternal.tsx b/src/lib/components/TelephoneNumberInput/TelephoneNumberInputInternal.tsx
index 0045388..a2525ca 100644
--- a/src/lib/components/TelephoneNumberInput/TelephoneNumberInputInternal.tsx
+++ b/src/lib/components/TelephoneNumberInput/TelephoneNumberInputInternal.tsx
@@ -30,6 +30,7 @@ const TelephoneNumberInputInternal = <T extends FieldValues>(props: TelephoneNum
     useBootstrapStyle = false,
     hideValidationMessage,
     placeholder,
+    maxLength,
   } = props;
   const {
     control,
@@ -118,6 +119,9 @@ const TelephoneNumberInputInternal = <T extends FieldValues>(props: TelephoneNum
               field.onBlur();
             }}
             slotProps={{
+              htmlInput: {
+                maxLength,
+              },
               input: {
                 inputMode: "tel",
                 startAdornment: <TelephoneNumberInputAdornment disabled={isDisabled} country={country} popupState={popupState} />,

From a0bdfda55be19ad20709e84c2b52c257e7ae7e81 Mon Sep 17 00:00:00 2001
From: Dominic Baur <dominic.baur@collana.com>
Date: Fri, 13 Mar 2026 13:26:49 +0100
Subject: [PATCH 2/4] fix test

---
 .../component/TelephoneNumberInput/TelephoneNumberInput.cy.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/cypress/component/TelephoneNumberInput/TelephoneNumberInput.cy.tsx b/cypress/cypress/component/TelephoneNumberInput/TelephoneNumberInput.cy.tsx
index a3a3d77..694c881 100644
--- a/cypress/cypress/component/TelephoneNumberInput/TelephoneNumberInput.cy.tsx
+++ b/cypress/cypress/component/TelephoneNumberInput/TelephoneNumberInput.cy.tsx
@@ -95,7 +95,7 @@ it("setting a max lenght works", () => {
 
   mount(
     <div className="p-4">
-      <Form onSubmit={cy.spy().as("onSubmitSpy")}>
+      <Form onSubmit={() => true}>
         <TelephoneNumberInput
           name={name}
           useBootstrapStyle

From 9507ed92ab56d3461436acc0697da785f8dc04a5 Mon Sep 17 00:00:00 2001
From: Dominic Baur <dominic.baur@collana.com>
Date: Fri, 13 Mar 2026 13:27:52 +0100
Subject: [PATCH 3/4] up

---
 .../component/TelephoneNumberInput/TelephoneNumberInput.cy.tsx   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/cypress/cypress/component/TelephoneNumberInput/TelephoneNumberInput.cy.tsx b/cypress/cypress/component/TelephoneNumberInput/TelephoneNumberInput.cy.tsx
index 694c881..598e87c 100644
--- a/cypress/cypress/component/TelephoneNumberInput/TelephoneNumberInput.cy.tsx
+++ b/cypress/cypress/component/TelephoneNumberInput/TelephoneNumberInput.cy.tsx
@@ -104,7 +104,6 @@ it("setting a max lenght works", () => {
           pinnedCountries={["GB", "IT"]}
           maxLength={9}
         />
-        <input type="submit" className="mt-4" />
       </Form>
     </div>,
   );

From 88dd998ba81d40d70e7a45aa8b0edc3bd6a3fef9 Mon Sep 17 00:00:00 2001
From: Dominic Baur <dominic.baur@collana.com>
Date: Fri, 13 Mar 2026 13:29:24 +0100
Subject: [PATCH 4/4] up

---
 .../component/TelephoneNumberInput/TelephoneNumberInput.cy.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/cypress/component/TelephoneNumberInput/TelephoneNumberInput.cy.tsx b/cypress/cypress/component/TelephoneNumberInput/TelephoneNumberInput.cy.tsx
index 598e87c..f506716 100644
--- a/cypress/cypress/component/TelephoneNumberInput/TelephoneNumberInput.cy.tsx
+++ b/cypress/cypress/component/TelephoneNumberInput/TelephoneNumberInput.cy.tsx
@@ -102,7 +102,7 @@ it("setting a max lenght works", () => {
           label="Phone Number"
           defaultCountry="CH"
           pinnedCountries={["GB", "IT"]}
-          maxLength={9}
+          maxLength={phoneNumber.length}
         />
       </Form>
     </div>,