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..f506716 100644 --- a/cypress/cypress/component/TelephoneNumberInput/TelephoneNumberInput.cy.tsx +++ b/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( +
+
true}> + + +
, + ); + + 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 extends Omit< CommonInputProps, - "minLength" | "maxLength" | "addonLeft" | "addonRight" | "name" | "onChange" | "onBlur" + "minLength" | "addonLeft" | "addonRight" | "name" | "onChange" | "onBlur" > { useBootstrapStyle?: boolean; name: FieldPathByValue; 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 = (props: TelephoneNum useBootstrapStyle = false, hideValidationMessage, placeholder, + maxLength, } = props; const { control, @@ -118,6 +119,9 @@ const TelephoneNumberInputInternal = (props: TelephoneNum field.onBlur(); }} slotProps={{ + htmlInput: { + maxLength, + }, input: { inputMode: "tel", startAdornment: ,