diff --git a/.changeset/maxLength-warnings.md b/.changeset/maxLength-warnings.md new file mode 100644 index 000000000..e7eeb009c --- /dev/null +++ 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 \ No newline at end of file diff --git a/packages/react-magma-dom/src/components/Input/index.tsx b/packages/react-magma-dom/src/components/Input/index.tsx index 08de74c08..456e75e43 100644 --- 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( 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( 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 index 905c6b3e3..15fe8e0cd 100644 --- 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( string | ReadonlyArray | 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( 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 index 8867bd330..dfc9bdd96 100644 --- 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( 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 | number >(props.defaultValue || props.value || ''); @@ -130,7 +132,7 @@ export const Textarea = React.forwardRef( (hasCharacterCounter && characterLength > maxCharacters) } id={id} - maxLength={!hasCharacterCounter && maxLength} + maxLength={maxLengthNum} isInverse={isInverse} onChange={handleChange} ref={ref}