fix(input/textarea): Fix maxLength console warning (#1105)

cengage · Jul 10, 2023 · 1fa916b · 1fa916b · github-actions · Jul 10, 2023
1 parent c49213f
commit 1fa916b
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 3 deletions.
diff --git a/.changeset/maxLength-warnings.md b/.changeset/maxLength-warnings.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(Input/Textarea): Fix `maxLength` console warning regarding passing a boolean attribute
diff --git a/packages/react-magma-dom/src/components/Input/index.tsx b/packages/react-magma-dom/src/components/Input/index.tsx
@@ -45,6 +45,8 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
     const maxCharacters = typeof maxCount === 'number' ? maxCount : maxLength;
 
+    const maxLengthNum = !hasCharacterCounter && maxLength ? maxLength : undefined;
+
     const isInverse = useIsInverse(props.isInverse);
 
     const [characterLength, setCharacterLength] = useState(
@@ -103,7 +105,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
           inputSize={inputSize}
           inputLength={characterLength}
           isInverse={isInverse}
-          maxLength={!hasCharacterCounter && maxLength}
+          maxLength={maxLengthNum}
           onChange={handleChange}
           onClear={handleClear}
           ref={ref}

diff --git a/packages/react-magma-dom/src/components/InputBase/index.tsx b/packages/react-magma-dom/src/components/InputBase/index.tsx
@@ -575,6 +575,8 @@ export const InputBase = React.forwardRef<HTMLInputElement, InputBaseProps>(
       string | ReadonlyArray<string> | number
     >(props.defaultValue || props.value || '');
 
+    const maxLengthNum = !hasCharacterCounter && maxLength ? maxLength : undefined;
+
     React.useEffect(() => {
       if (props.value !== undefined && props.value !== null) {
         setValue(props.value);
@@ -623,7 +625,7 @@ export const InputBase = React.forwardRef<HTMLInputElement, InputBaseProps>(
             isPredictive={isPredictive}
             hasError={hasError}
             ref={ref}
-            maxLength={!hasCharacterCounter && maxLength}
+            maxLength={maxLengthNum}
             onChange={handleChange}
             style={inputStyle}
             theme={theme}

diff --git a/packages/react-magma-dom/src/components/Textarea/index.tsx b/packages/react-magma-dom/src/components/Textarea/index.tsx
@@ -77,6 +77,8 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     const descriptionId = errorMessage || helperMessage ? `${id}__desc` : null;
     const maxCharacters = typeof maxCount === 'number' ? maxCount : maxLength;
 
+    const maxLengthNum = !hasCharacterCounter && maxLength ? maxLength : undefined;
+
     const [value, setValue] = React.useState<
       string | ReadonlyArray<string> | number
     >(props.defaultValue || props.value || '');
@@ -130,7 +132,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             (hasCharacterCounter && characterLength > maxCharacters)
           }
           id={id}
-          maxLength={!hasCharacterCounter && maxLength}
+          maxLength={maxLengthNum}
           isInverse={isInverse}
           onChange={handleChange}
           ref={ref}