fix(TextInputBase): correct counter limit handling (#428)

## Short description
This pull request fixes the issue where the `counterLimit` was not
correctly accounting for the spaces added by the `valueFormat` function
in the `TextInputBase` component. This ensures that the actual text
length (excluding spaces) is compared against the `counterLimit`.

## List of changes proposed in this pull request
- Updated the `onChangeTextHandler` to correctly handle the
`counterLimit` by calculating the actual text length without spaces
- Adjusted the `maxLength` prop of the `TextInput` component to account
for the spaces added by the `valueFormat` function
- Ensured that the `counterLimit` is respected correctly for formatted
text inputs such as `credit-card` and `iban`

## How to test
- Set a `counterLimit` in `DSTextFields`
- Insert some value in `credit-card` and `iban` `TextInput`
- Ensure that now the `counterLimit` displaying the correct number
## Preview
| Old | New |
|--------|--------|
| <video
src="https://github.com/user-attachments/assets/6449ed43-75fb-4eec-b633-2a018c7e78e8"
/> | <video
src="https://github.com/user-attachments/assets/0de2d7f0-2b01-4751-b759-a0c41108198e"/>
|

### Prevent counter updating on wrong value

| Old  | New |
|--------|--------|
| <video
src="https://github.com/user-attachments/assets/bb0bab8f-bb4f-4433-aa10-f2ed1e87cfa1"
/> | <video
src="https://github.com/user-attachments/assets/7518a037-e9d4-4b48-aba8-2877b2d71e90"/>
|

Author: LeleDallas

src/components/textInput/TextInputBase.tsx

@@ -120,17 +120,27 @@ const styles = StyleSheet.create({
 
 type InputTextHelperRow = Pick<
   InputTextProps,
-  "value" | "counterLimit" | "bottomMessage" | "bottomMessageColor"
+  | "value"
+  | "counterLimit"
+  | "bottomMessage"
+  | "bottomMessageColor"
+  | "inputType"
 >;
 
 const HelperRow = ({
   value,
   counterLimit,
   bottomMessage,
-  bottomMessageColor
+  bottomMessageColor,
+  inputType
 }: InputTextHelperRow) => {
   const theme = useIOTheme();
-  const valueCount = useMemo(() => value.length, [value]);
+
+  const valueCount = useMemo(
+    () =>
+      inputType !== "default" ? value.replace(/\s/g, "").length : value.length,
+    [inputType, value]
+  );
 
   const bottomMessageColorDefault: IOColors = theme["textBody-tertiary"];
   const bottomMessageColorValue =
@@ -315,12 +325,22 @@ export const TextInputBase = ({
 
   const onChangeTextHandler = useCallback(
     (text: string) => {
-      if (counterLimit && text.length > counterLimit) {
+      const actualTextLength =
+        inputType !== "default" ? text.replace(/\s/g, "").length : text.length;
+
+      if (counterLimit && actualTextLength > counterLimit) {
         return;
       }
-      onChangeText(text);
+
+      if (inputType !== "default") {
+        // necessary to omit whitespaces added by the valueFormat function
+        const formattedText = text.replace(/\s/g, "");
+        onChangeText(formattedText);
+      } else {
+        onChangeText(text);
+      }
     },
-    [counterLimit, onChangeText]
+    [counterLimit, onChangeText, inputType]
   );
 
   const onBlurHandler = useCallback(() => {
@@ -348,6 +368,15 @@ export const TextInputBase = ({
     [value, derivedInputProps]
   );
 
+  // Calculate the adjusted maxLength to account for spaces
+  const adjustedMaxLength = useMemo(() => {
+    if (counterLimit && derivedInputProps && derivedInputProps.valueFormat) {
+      const spacesCount = Math.floor(counterLimit / 4);
+      return counterLimit + spacesCount;
+    }
+    return counterLimit;
+  }, [counterLimit, derivedInputProps]);
+
   return (
     <>
       <Pressable
@@ -407,7 +436,7 @@ export const TextInputBase = ({
           accessibilityHint={accessibilityHint}
           selectionColor={IOColors[theme["interactiveElem-default"]]} // Caret on iOS
           cursorColor={IOColors[theme["interactiveElem-default"]]} // Caret Android
-          maxLength={counterLimit}
+          maxLength={adjustedMaxLength}
           onBlur={onBlurHandler}
           onFocus={onFocusHandler}
           blurOnSubmit={true}
@@ -499,10 +528,11 @@ export const TextInputBase = ({
 
       {(bottomMessage || counterLimit) && (
         <HelperRow
-          value={value}
+          value={inputValue}
           bottomMessage={bottomMessage}
           bottomMessageColor={bottomMessageColor}
           counterLimit={counterLimit}
+          inputType={inputType}
         />
       )}
     </>