react-frontend-common-components 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-frontend-common-components",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Reusable frontend library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/app-input/app-input.tsx

@@ -76,29 +76,32 @@ const AppInput = ({
 
   const placeholder = isOptional ? `${label} (optional)` : label;
 
-  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-    let newValue = e.target.value;
-
-    const isFloat = type === "float";
-    const isNumber = type === "number" || isFloat;
-
-    if (isNumber) {
-      const floatRegex = /^-?\d*\.?\d*$/;
-      if (!floatRegex.test(newValue)) return;
-
-      const digitCount = newValue.replace(/\./g, "").length;
-      if (maxLength && digitCount > maxLength) return;
-    }
-
-    if (name === "name") {
-      const alphabetOnly = /^[a-zA-Z\s]*$/;
-      if (!alphabetOnly.test(newValue)) return;
-    }
+const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+  let newValue = e.target.value;
+
+  const isFloat = type === "float";
+  const isNumber = type === "number" || isFloat;
+
+  if (isNumber) {
+    const floatRegex = /^-?\d*\.?\d*$/;
+    if (!floatRegex.test(newValue)) return;
+
+    const digitCount = newValue.replace(/\./g, "").length;
+    if (maxLength && digitCount > maxLength) return;
+  }
+
+  if (name === "name") {
+    newValue = newValue.replace(/[^a-zA-Z\s]/g, "");
+  }
+
+  setInputValue(newValue);
+  setIsTyping(newValue.length > 0);
+  handleChange?.({
+    ...e,
+    target: { ...e.target, value: newValue }, 
+  });
+};
 
-    setInputValue(newValue);
-    setIsTyping(newValue.length > 0);
-    handleChange?.(e);
-  };
 
   return (
     <div className={`appInput ${className || ""}`}>
@@ -112,8 +115,10 @@ const AppInput = ({
       )}
 
       <Input
-        type={type === "float" ? "text" : type}
-        inputMode={type === "float" ? "decimal" : undefined}
+        type={name === "name" ? "text" : type === "float" ? "text" : type}
+        inputMode={
+          name === "name" ? "text" : type === "float" ? "decimal" : undefined
+        }
         data-test-id={dataTestId}
         id={id}
         disabled={disabled}