Character counter on Textfield component does not update with initial value

[paal2707]

Description of the bug

When I write a character in the Textfield component the character counter shows the number of positions left correctly. But after I have saved the value and refreshed the page, The text shows up in the input but the character counter shows the incorrect message "Du har 9 av 9 tegn igjen" (the field is already full). If I start editing in the opened field again, it updates after the first character change and behaves as expected.

Steps To Reproduce

1. Add initial text to Textfield with character counter
2. Load page

Additional Information

[Barsnes]

Hey, thanks for the bug report! 🐛
Are you using defaultValue to set the initial value of the input?
I tested with defaultValue, and it seems to work fine. However, I get the same bug you are describing when using just value for the initial input.

[paal2707]

I am not using defaultValue because i want the component to be controlled. When page is reloaded this occurs.

[Barsnes]

I am not using defaultValue because i want the component to be controlled. When page is reloaded this occurs.

I understand, would something like this work for you?
codesandbox

const DEFAULT_VALUE = "default";

export default function Controlled() {
  const [value, setValue] = useState(DEFAULT_VALUE);

  return (
    <Textfield
      value={value}
      onChange={(e) => setValue(e.target.value)}
      defaultValue={DEFAULT_VALUE}
      characterLimit={{
        maxCount: 9,
      }}
    />
  );
}

edit: I see that this throws a console error 🤔

[paal2707]

I am not using defaultValue because i want the component to be controlled. When page is reloaded this occurs.

I understand, would something like this work for you? codesandbox

const DEFAULT_VALUE = "default";

export default function Controlled() {
  const [value, setValue] = useState(DEFAULT_VALUE);

  return (
    <Textfield
      value={value}
      onChange={(e) => setValue(e.target.value)}
      defaultValue={DEFAULT_VALUE}
      characterLimit={{
        maxCount: 9,
      }}
    />
  );
}

edit: I see that this throws a console error 🤔

This wont fix my problem because if you reload the page the state is beeing preserved but not the defaultValue. Also if i set the defaultValue initially to my value, then it throws the error you are referring to. I have added a pull-request with a possible solution. #2056