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