diff --git a/.changeset/eighty-glasses-sparkle.md b/.changeset/eighty-glasses-sparkle.md
new file mode 100644
index 0000000000..b099b92d81
--- /dev/null
+++ b/.changeset/eighty-glasses-sparkle.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": patch
+"@navikt/ds-css": patch
+---
+
+:wheelchair: Textarea: Forsinkelse ved live-opplesning av gjenstÄende tegn
diff --git a/@navikt/core/css/form/textarea.css b/@navikt/core/css/form/textarea.css
index 00c6364239..4877c83e39 100644
--- a/@navikt/core/css/form/textarea.css
+++ b/@navikt/core/css/form/textarea.css
@@ -70,6 +70,14 @@
color: var(--ac-textarea-counter-error-text, var(--__ac-textarea-counter-error-text, var(--a-text-danger)));
}
+.navds-textarea__sr-counter {
+ display: none;
+}
+
+.navds-textarea__wrapper:focus-within .navds-textarea__sr-counter {
+ display: initial;
+}
+
.navds-textarea--resize-both .navds-textarea__input {
resize: both;
border-end-end-radius: 0;
diff --git a/@navikt/core/react/src/form/TextareaCounter.tsx b/@navikt/core/react/src/form/TextareaCounter.tsx
index 95123a290a..2120c188c0 100644
--- a/@navikt/core/react/src/form/TextareaCounter.tsx
+++ b/@navikt/core/react/src/form/TextareaCounter.tsx
@@ -1,6 +1,7 @@
import cl from "clsx";
-import React from "react";
+import React, { useEffect, useState } from "react";
import { BodyShort } from "../typography";
+import debounce from "../util/debounce";
import type { TextareaProps } from "./Textarea";
interface Props {
@@ -13,19 +14,45 @@ interface Props {
const TextareaCounter = ({ maxLength, currentLength, size, i18n }: Props) => {
const difference = maxLength - currentLength;
+ const [debouncedDiff, setDebouncedDiff] = useState(difference);
+
+ useEffect(() => {
+ const debounceFunc = debounce(() => {
+ setDebouncedDiff(difference);
+ }, 2000);
+ debounceFunc();
+
+ return () => {
+ debounceFunc.clear();
+ };
+ }, [difference]);
+
return (
-
- {difference < 0
- ? `${Math.abs(difference)} ${i18n?.counterTooMuch ?? "tegn for mye"}`
- : `${difference} ${i18n?.counterLeft ?? "tegn igjen"}`}
-
+ <>
+ {difference < 20 && (
+
+ {getCounterText(debouncedDiff, i18n)}
+
+ )}
+
+
+ {getCounterText(difference, i18n)}
+
+ >
);
};
+const getCounterText = (difference: number, i18n: TextareaProps["i18n"]) =>
+ difference < 0
+ ? `${Math.abs(difference)} ${i18n?.counterTooMuch ?? "tegn for mye"}`
+ : `${difference} ${i18n?.counterLeft ?? "tegn igjen"}`;
+
export default TextareaCounter;
diff --git a/@navikt/core/react/src/form/stories/textarea.stories.tsx b/@navikt/core/react/src/form/stories/textarea.stories.tsx
index 038689b9d3..9448e612e0 100644
--- a/@navikt/core/react/src/form/stories/textarea.stories.tsx
+++ b/@navikt/core/react/src/form/stories/textarea.stories.tsx
@@ -103,7 +103,7 @@ export const HideLabel = () => {
};
export const MaxLength = () => {
- return ;
+ return ;
};
export const MinRows = () => {