fix: allow CharacterCount value ^ defaultValue (#2397)

Co-authored-by: John Gedeon <[email protected]>

Author: werdnanoslen

src/components/forms/CharacterCount/CharacterCount.test.tsx

@@ -132,22 +132,33 @@ describe('CharacterCount component', () => {
 
     it('handles own props', () => {
       const tRef = React.createRef<HTMLTextAreaElement>()
-      const { getByRole } = render(
-        <CharacterCount
-          id="character-count-id"
-          name="character-count"
-          defaultValue="Prefill this value"
-          isTextArea
-          rows={5}
-          maxLength={10}
-          inputRef={tRef}
-        />
+      const { getByDisplayValue } = render(
+        <>
+          <CharacterCount
+            id="character-count-defaultValue"
+            name="character-count-defaultValue"
+            defaultValue="Prefilled defaultValue"
+            isTextArea
+            rows={5}
+            maxLength={10}
+            inputRef={tRef}
+          />
+          <CharacterCount
+            id="character-count-value"
+            name="character-count-value"
+            value="Prefilled value"
+            isTextArea
+            rows={5}
+            maxLength={10}
+          />
+        </>
       )
-      const textarea = getByRole('textbox')
-      expect(textarea).toHaveAttribute('name', 'character-count')
-      expect(textarea).toHaveAttribute('rows', '5')
-      expect(textarea).toHaveTextContent('Prefill this value')
-      expect(textarea).toBe(tRef.current)
+      const textareaDefaultValue = getByDisplayValue('Prefilled defaultValue')
+      expect(textareaDefaultValue).toHaveAttribute('name', 'character-count-defaultValue')
+      expect(textareaDefaultValue).toHaveAttribute('rows', '5')
+      expect(textareaDefaultValue).toBe(tRef.current)
+      const textareaValue = getByDisplayValue('Prefilled value')
+      expect(textareaValue).toHaveAttribute('id', 'character-count-value')
     })
 
     it('calls own onChange and onBlur functions', () => {

src/components/forms/CharacterCount/CharacterCount.tsx

@@ -37,6 +37,7 @@ type BaseCharacterCountProps = {
   id: string
   name: string
   maxLength: number
+  value?: string
   defaultValue?: string
   className?: string
   isTextArea?: boolean
@@ -57,6 +58,7 @@ export const CharacterCount = ({
   name,
   className,
   maxLength,
+  value = '',
   defaultValue = '',
   isTextArea = false,
   getCharacterCount = defaultCharacterCount,
@@ -65,7 +67,7 @@ export const CharacterCount = ({
 }:
   | TextInputCharacterCountProps
   | TextareaCharacterCountProps): React.ReactElement => {
-  const initialCount = getCharacterCount(defaultValue)
+  const initialCount = getCharacterCount(value || defaultValue)
   const [length, setLength] = useState(initialCount)
   const [message, setMessage] = useState(getMessage(initialCount, maxLength))
   const [isValid, setIsValid] = useState(initialCount < maxLength)
@@ -114,18 +116,17 @@ export const CharacterCount = ({
     const { onBlur, onChange, inputRef, ...textAreaProps } =
       remainingProps as Partial<TextareaCharacterCountProps>
 
-    InputComponent = (
-      <Textarea
-        id={id}
-        name={name}
-        className={classes}
-        defaultValue={defaultValue}
-        onBlur={(e): void => handleBlur(e, onBlur)}
-        onChange={(e): void => handleChange(e, onChange)}
-        inputRef={inputRef}
-        {...textAreaProps}
-      />
-    )
+    const attributes = {
+      id: id,
+      name: name,
+      className: classes,
+      ...(value ? {value: value} : {defaultValue: defaultValue}),
+      onBlur: (e: React.FocusEvent<HTMLTextAreaElement, Element>): void => handleBlur(e, onBlur),
+      onChange: (e: React.ChangeEvent<HTMLTextAreaElement>): void => handleChange(e, onChange),
+      inputRef: inputRef,
+      ...textAreaProps,
+    }
+    InputComponent = (<Textarea {...attributes} />)
   } else {
     const {
       onBlur,
@@ -134,20 +135,18 @@ export const CharacterCount = ({
       type = 'text',
       ...inputProps
     } = remainingProps as Partial<TextInputCharacterCountProps>
-
-    InputComponent = (
-      <TextInput
-        id={id}
-        type={type}
-        name={name}
-        className={classes}
-        defaultValue={defaultValue}
-        onBlur={(e): void => handleBlur(e, onBlur)}
-        onChange={(e): void => handleChange(e, onChange)}
-        inputRef={inputRef}
-        {...inputProps}
-      />
-    )
+    const attributes = {
+      id: id,
+      type: type,
+      name: name,
+      className: classes,
+      ...(value ? {value: value} : {defaultValue: defaultValue}),
+      onBlur: (e: React.FocusEvent<HTMLInputElement, Element>): void => handleBlur(e, onBlur),
+      onChange: (e: React.ChangeEvent<HTMLInputElement>): void => handleChange(e, onChange),
+      inputRef: inputRef,
+      ...inputProps,
+    }
+    InputComponent = (<TextInput {...attributes} />)
   }
 
   return (