Add support for max length on telephonenumber input (#164)

This pr aims to add support for max length on telephonenumber input

Author: dom-baur

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

cypress/cypress/component/TelephoneNumberInput/TelephoneNumberInput.cy.tsx

@@ -88,3 +88,27 @@ 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={() => true}>
+        <TelephoneNumberInput
+          name={name}
+          useBootstrapStyle
+          label="Phone Number"
+          defaultCountry="CH"
+          pinnedCountries={["GB", "IT"]}
+          maxLength={phoneNumber.length}
+        />
+      </Form>
+    </div>,
+  );
+
+  cy.get(`.MuiInputBase-input`).clear();
+  cy.get(`.MuiInputBase-input`).type(`${phoneNumber} 1`);
+  cy.get(`.MuiInputBase-input`).should("have.value", phoneNumber);
+});

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>;

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} />,