Repository: SpareBank1/designsystem
Pull request #2739: Fix/forms/setinputgrouplabelasspan
Author: login: dagfrode
Created: 2025-04-01T09:28:26Z | Merged: 2025-04-07T07:40:03Z

<!-- Gi saken en oppsummerende tittel ovenfor. -->

## Beskrivelse

Teamene får enda `setinputgrouplabelasspan` siden de bruker 

```tsx

<InputGroup>
{(inputProps) => (
    <>
        <Input
            value={formatAmountV2(estateValue)}
            name="estateValue"
            {...inputProps}
        />
    </>
)}
</InputGroup>
```

fremfor

```tsx
<InputGroup>
        <Input
            value={formatAmountV2(estateValue)}
            name="estateValue"
        />
</InputGroup>
```

Ikke sikker på hvorfor de gjør det, men de gjør det.

Fjerner derfor hacken. Det gjør den muligens litt mindre UU vennlig, men fjerner warningen og er ikke nødvendig for testene lenger heller pga egne testhelpers.

Fixes [#2738](https://github.com/SpareBank1/designsystem/issues/2738)

Oppdaterer og testhelper slik at den støtter å sende inn tomme eller delvis tomme datoer og on blur etter year slik at hvis en sender inn en delvis dato blir den satt riktig.

Gjør og et par små endringer for å få le date ting å fungere riktig igjen etter at vi gjorde datepicker om til konntrollert komponent.

Gikk fra å være en liten quick fix til flere problemer betaling oppllevde her.



Diff:
diff --git a/packages/ffe-datepicker-react/src/datelogic/simpledate.ts b/packages/ffe-datepicker-react/src/datelogic/simpledate.ts
index 8b21889eae..4da0c7bf97 100644
--- a/packages/ffe-datepicker-react/src/datelogic/simpledate.ts
+++ b/packages/ffe-datepicker-react/src/datelogic/simpledate.ts
@@ -163,7 +163,7 @@ export const getSimpleDateFromString = (
     let month = match[3];
     let year = match[4];
 
-    if (year.length === 1 || year.length === 2) {
+    if ((year.length === 1 && year !== '0') || year.length === 2) {
         // @ts-ignore
         year = deriveOneOrTwoDigitYear(year);
     }
@@ -178,7 +178,7 @@ export const getSimpleDateFromString = (
         // @ts-ignore
         month = today.getMonth() + 1;
     }
-    if (!year) {
+    if (!year || year === '0') {
         // @ts-ignore
         year = today.getFullYear();
     }
diff --git a/packages/ffe-datepicker-react/src/datepicker/Datepicker.tsx b/packages/ffe-datepicker-react/src/datepicker/Datepicker.tsx
index 8f8d34b599..fde67453ef 100644
--- a/packages/ffe-datepicker-react/src/datepicker/Datepicker.tsx
+++ b/packages/ffe-datepicker-react/src/datepicker/Datepicker.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Locale } from '../datelogic/types';
 import { DatepickerComp, DatepickerCompProps } from './DatepickerComp';
 import { DatepickerProvider } from './DatepickerContext';
@@ -6,19 +6,13 @@ import { DatepickerProvider } from './DatepickerContext';
 export interface DatepickerProps extends DatepickerCompProps {
     value: string;
     locale: Locale;
-    /** Hack that changes InputGroups label to a span to be wcag complient  */
-    setInputGroupLabelAsSpan?: () => void;
 }
 
 export const Datepicker: React.FC<DatepickerProps> = ({
     locale = 'nb' as const,
     value,
-    setInputGroupLabelAsSpan,
     ...props
 }: DatepickerProps) => {
-    useEffect(() => {
-        setInputGroupLabelAsSpan?.();
-    }, [setInputGroupLabelAsSpan]);
     return (
         <DatepickerProvider locale={locale} value={value}>
             <DatepickerComp {...props} />
diff --git a/packages/ffe-datepicker-react/src/datepicker/DatepickerInContext.spec.tsx b/packages/ffe-datepicker-react/src/datepicker/DatepickerInContext.spec.tsx
index e25023e0ab..79a3a6b20b 100644
--- a/packages/ffe-datepicker-react/src/datepicker/DatepickerInContext.spec.tsx
+++ b/packages/ffe-datepicker-react/src/datepicker/DatepickerInContext.spec.tsx
@@ -9,6 +9,7 @@ const defaultProps = {
     onChange: () => {},
     locale: 'nb' as const,
     labelId: 'datepicker-label',
+    maxDate: '31.12.2128',
 };
 
 const renderDatePicker = (props?: Partial<DatepickerProps>) =>
@@ -45,4 +46,42 @@ describe('<InputGroup><Datepicker /></InputGroup>', () => {
 
         expect(datepicker.getValue()).toStrictEqual('06.05.2024');
     });
+
+    it('datepicker can be cleared by testing function', async () => {
+        renderDatePicker({ value: '01.01.2024' });
+
+        const datepicker = getDatepickerByLabelText('Datovelger');
+        await datepicker.setValue('');
+
+        expect(datepicker.getValue()).toBeNull();
+    });
+
+    it('2 number year date is updated to correct 4 number year', async () => {
+        renderDatePicker({ value: '01.01.2024' });
+
+        const datepicker = getDatepickerByLabelText('Datovelger');
+        await datepicker.setValue('02.02.28');
+
+        expect(datepicker.getValue()).toStrictEqual('02.02.2028');
+    });
+
+    it('3 number year date is updated to correct 4 number year', async () => {
+        renderDatePicker({ value: '01.01.2024' });
+
+        const datepicker = getDatepickerByLabelText('Datovelger');
+        await datepicker.setValue('02.02.128');
+
+        expect(datepicker.getValue()).toStrictEqual('02.02.2128');
+    });
+
+    it('no year is updated to correct 4 number year', async () => {
+        renderDatePicker({ value: '01.01.2023' });
+
+        const datepicker = getDatepickerByLabelText('Datovelger');
+        await datepicker.setValue('02.02.');
+        const date = new Date();
+        expect(datepicker.getValue()).toStrictEqual(
+            `02.02.${date.getFullYear()}`,
+        );
+    });
 });
diff --git a/packages/ffe-datepicker-react/src/datepicker/index.ts b/packages/ffe-datepicker-react/src/datepicker/index.ts
index c3c84ee749..8e32a66d05 100644
--- a/packages/ffe-datepicker-react/src/datepicker/index.ts
+++ b/packages/ffe-datepicker-react/src/datepicker/index.ts
@@ -1,4 +1,6 @@
 export { Datepicker, DatepickerProps } from './Datepicker';
 export type { DatepickerCompProps } from './DatepickerComp';
-export { getDatepickerByLabelText } from './testHelper';
-export type { DatepickerTestHelper } from './testHelper';
+export {
+    getDatepickerByLabelText,
+    type DatepickerTestHelper,
+} from './testHelper';
diff --git a/packages/ffe-datepicker-react/src/datepicker/testHelper.ts b/packages/ffe-datepicker-react/src/datepicker/testHelper.ts
index b7f9e14a7a..bf520702ce 100644
--- a/packages/ffe-datepicker-react/src/datepicker/testHelper.ts
+++ b/packages/ffe-datepicker-react/src/datepicker/testHelper.ts
@@ -1,12 +1,16 @@
 import { act, screen } from '@testing-library/react';
 
-async function simulateTyping(element: Element, text: string, delay = 100) {
+async function simulateTyping(element: HTMLElement, text: string, delay = 100) {
+    let _text = text;
+    if (text.length === 0) {
+        _text = '0';
+    }
     return new Promise<void>(resolve => {
         let index = 0;
 
         function typeCharacter() {
-            if (index < text.length) {
-                const char = text[index];
+            if (index < _text.length) {
+                const char = _text[index];
                 const eventOptions = {
                     key: char,
                     keyCode: char.charCodeAt(0),
@@ -42,7 +46,7 @@ export type DatepickerTestHelper = {
     /**
      * The datepicker element
      */
-    element: Element;
+    element: HTMLElement;
     /**
      * Function to get the value of the datepicker
      *
@@ -72,7 +76,9 @@ export function getDatepickerByLabelText(
     const elements = screen
         .getAllByText(label)
         .map(element => element.parentElement?.querySelector('.ffe-datepicker'))
-        .filter(element => element !== null && element !== undefined);
+        .filter(
+            element => element !== null && element !== undefined,
+        ) as HTMLElement[];
 
     function getValue(element: Element): string | null {
         const [dayElement, monthElement, yearElement] = Array.from(
@@ -82,23 +88,31 @@ export function getDatepickerByLabelText(
         const day = dayElement.getAttribute('aria-valuenow') || '';
         const month = monthElement.getAttribute('aria-valuenow') || '';
         const year = yearElement.getAttribute('aria-valuenow') || '';
-        return year !== '' && month !== '' && day !== ''
+        return year !== '' &&
+            year !== '0' &&
+            month !== '' &&
+            month !== '0' &&
+            day !== '' &&
+            day !== '0'
             ? `${leftPad(day)}.${leftPad(month)}.${year}`
             : null;
     }
 
-    async function setValue(element: Element, value: string) {
+    async function setValue(element: HTMLElement, value: string) {
         const [dayElement, monthElement, yearElement] = Array.from(
             element.querySelectorAll('[role="spinbutton"]'),
-        );
+        ) as HTMLElement[];
         // eslint-disable-next-line prefer-const
-        let [dayValue, monthValue, yearValue] = value.split('.');
+        let [dayValue, monthValue, yearValue] = value
+            ? value.split('.')
+            : ['0', '0', '0'];
         dayValue = dayValue.length === 1 ? `0${dayValue}` : dayValue;
         monthValue = monthValue.length === 1 ? `0${monthValue}` : monthValue;
 
         await simulateTyping(dayElement, dayValue);
         await simulateTyping(monthElement, monthValue);
         await simulateTyping(yearElement, yearValue);
+        act(() => yearElement.blur());
     }
 
     return {
diff --git a/packages/ffe-datepicker-react/src/index.ts b/packages/ffe-datepicker-react/src/index.ts
index 07a6566424..5592793be6 100644
--- a/packages/ffe-datepicker-react/src/index.ts
+++ b/packages/ffe-datepicker-react/src/index.ts
@@ -1,3 +1,8 @@
-export { Datepicker, DatepickerProps } from './datepicker';
+export {
+    Datepicker,
+    DatepickerProps,
+    getDatepickerByLabelText,
+    type DatepickerTestHelper,
+} from './datepicker';
 export { DateInput, DateInputProps } from './input';
 export { Calendar, CalendarProps } from './calendar';
diff --git a/packages/ffe-form-react/src/InputGroup.tsx b/packages/ffe-form-react/src/InputGroup.tsx
index 06a9c884ae..0ef32d8ad0 100644
--- a/packages/ffe-form-react/src/InputGroup.tsx
+++ b/packages/ffe-form-react/src/InputGroup.tsx
@@ -1,8 +1,8 @@
+import classNames from 'classnames';
 import React, { useId } from 'react';
-import { Tooltip, TooltipProps } from './Tooltip';
 import { Label } from './Label';
-import classNames from 'classnames';
 import { ErrorFieldMessage } from './message';
+import { Tooltip, TooltipProps } from './Tooltip';
 
 type ChildrenExtraProps = {
     id: string;
@@ -10,10 +10,6 @@ type ChildrenExtraProps = {
     'aria-describedby': string | undefined;
 };
 
-type FunctionExtraProps = {
-    setInputGroupLabelAsSpan: () => void;
-};
-
 export interface InputGroupProps
     extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
     /** The id that will be used on the input child if you don't want a generated one */
@@ -67,10 +63,9 @@ export interface InputGroupProps
 const getChildrenWithExtraProps = (
     children: InputGroupProps['children'],
     extraProps: ChildrenExtraProps,
-    functionExtraProps: FunctionExtraProps,
 ) => {
     if (typeof children === 'function') {
-        return children({ ...extraProps, ...functionExtraProps });
+        return children(extraProps);
     } else if (React.isValidElement(children)) {
         return React.cloneElement(children, extraProps);
     }
@@ -90,7 +85,6 @@ export const InputGroup: React.FC<InputGroupProps> = ({
     labelId,
     ...rest
 }) => {
-    const [labelAsSpan, setLabelAsSpan] = React.useState(false);
     const generatedInputId = useId();
     const id = inputId ?? generatedInputId;
     const descriptionId = description ? `${id}-description` : undefined;
@@ -147,17 +141,7 @@ export const InputGroup: React.FC<InputGroupProps> = ({
         'aria-describedby': ariaDescribedBy,
     } as const;
 
-    const extraFunctionProps = {
-        setInputGroupLabelAsSpan: () => {
-            setLabelAsSpan(true);
-        },
-    } as const;
-
-    const modifiedChildren = getChildrenWithExtraProps(
-        children,
-        extraProps,
-        extraFunctionProps,
-    );
+    const modifiedChildren = getChildrenWithExtraProps(children, extraProps);
 
     return (
         <div
@@ -172,11 +156,7 @@ export const InputGroup: React.FC<InputGroupProps> = ({
             {...rest}
         >
             {typeof label === 'string' ? (
-                <Label
-                    as={labelAsSpan ? 'span' : 'label'}
-                    htmlFor={id}
-                    id={labelId}
-                >
+                <Label htmlFor={id} id={labelId}>
                     {label}
                 </Label>
             ) : (


Reviews:
user: login: dagfrode
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-02T08:16:07Z
user: login: hagenek
body: Gode forbedringer.
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-04-02T08:34:45Z
user: login: hagenek
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-02T08:35:09Z
user: login: tuva-odegard
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-03T06:46:45Z
user: login: tuva-odegard
body: Burde ikke være 3 forskjellige commits på 1 pakke kanskje? 
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-03T06:49:00Z
user: login: dagfrode
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-03T06:57:14Z
user: login: tuva-odegard
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-03T07:15:09Z
user: login: dagfrode
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-03T12:04:55Z
user: login: tuva-odegard
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T07:03:13Z
user: login: tuva-odegard
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T07:03:58Z
user: login: tuva-odegard
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T07:04:29Z
user: login: tuva-odegard
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T07:59:07Z
user: login: dagfrode
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T09:16:15Z
user: login: dagfrode
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T09:19:26Z
user: login: tuva-odegard
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-07T07:38:10Z

Review comments:
diff_hunk: @@ -117,16 +117,17 @@ export const DatepickerComp: React.FC<DatepickerCompProps> = ({
     const validateDateIntervals = useCallback(() => {
         const dateString = formatDate();
         getSimpleDateFromString(dateString, date => {
-            const maxDateValidated = maxDateProp
-                ? getSimpleDateFromString(maxDateProp)
-                : null;
-
-            if (
-                maxDateValidated?.isBefore(date) &&
-                isDateInputWithTwoDigitYear(dateString)
-            ) {
-                date.adjust({ period: 'Y', offset: -100 });
-            }
+            // Kan vi fjerne dette?
path: packages/ffe-datepicker-react/src/datepicker/DatepickerComp.tsx
user: login: dagfrode
body: Fikk spørsmål om det var meningen at datoen skulle komplete til `1928` og ikke `2028` når de skrev inn `28`. De har nok satt en max date. Men da er jo det noe de validerer på selv. Gir mening at de ikke får velge i kalenderen, men rart å endre det brukeren skriver inn.
created_at: 2025-04-02T08:16:07Z
author_association: CONTRIBUTOR
diff_hunk: @@ -117,16 +117,17 @@ export const DatepickerComp: React.FC<DatepickerCompProps> = ({
     const validateDateIntervals = useCallback(() => {
         const dateString = formatDate();
         getSimpleDateFromString(dateString, date => {
-            const maxDateValidated = maxDateProp
-                ? getSimpleDateFromString(maxDateProp)
-                : null;
-
-            if (
-                maxDateValidated?.isBefore(date) &&
-                isDateInputWithTwoDigitYear(dateString)
-            ) {
-                date.adjust({ period: 'Y', offset: -100 });
-            }
+            // Kan vi fjerne dette?
path: packages/ffe-datepicker-react/src/datepicker/DatepickerComp.tsx
user: login: hagenek
body: Det er vel bare å fjerne? Rar oppførsel imo.
created_at: 2025-04-02T08:35:09Z
author_association: CONTRIBUTOR
diff_hunk: @@ -117,16 +117,17 @@ export const DatepickerComp: React.FC<DatepickerCompProps> = ({
     const validateDateIntervals = useCallback(() => {
         const dateString = formatDate();
         getSimpleDateFromString(dateString, date => {
-            const maxDateValidated = maxDateProp
-                ? getSimpleDateFromString(maxDateProp)
-                : null;
-
-            if (
-                maxDateValidated?.isBefore(date) &&
-                isDateInputWithTwoDigitYear(dateString)
-            ) {
-                date.adjust({ period: 'Y', offset: -100 });
-            }
+            // Kan vi fjerne dette?
path: packages/ffe-datepicker-react/src/datepicker/DatepickerComp.tsx
user: login: tuva-odegard
body: Ikke bare å fjerne, vi ble bedt om å legge det inn igjen etter siste oppdatering i november! Handler spesielt om hvis man kopierer inn datoer som ikke har fullstendig år. Usikker på logikken om når det blir 2028 og 1928, men det burde sees på hvis den oppfører seg unormalt. Kanskje vi burde se på en bedre logikk om når det burde bli 19 og når det blir 20.
created_at: 2025-04-03T06:46:45Z
author_association: CONTRIBUTOR
diff_hunk: @@ -117,16 +117,17 @@ export const DatepickerComp: React.FC<DatepickerCompProps> = ({
     const validateDateIntervals = useCallback(() => {
         const dateString = formatDate();
         getSimpleDateFromString(dateString, date => {
-            const maxDateValidated = maxDateProp
-                ? getSimpleDateFromString(maxDateProp)
-                : null;
-
-            if (
-                maxDateValidated?.isBefore(date) &&
-                isDateInputWithTwoDigitYear(dateString)
-            ) {
-                date.adjust({ period: 'Y', offset: -100 });
-            }
+            // Kan vi fjerne dette?
path: packages/ffe-datepicker-react/src/datepicker/DatepickerComp.tsx
user: login: dagfrode
body: aight, da lar jeg det være og event lager en egen issue på den casen :)
created_at: 2025-04-03T06:57:13Z
author_association: CONTRIBUTOR
diff_hunk: @@ -117,16 +117,17 @@ export const DatepickerComp: React.FC<DatepickerCompProps> = ({
     const validateDateIntervals = useCallback(() => {
         const dateString = formatDate();
         getSimpleDateFromString(dateString, date => {
-            const maxDateValidated = maxDateProp
-                ? getSimpleDateFromString(maxDateProp)
-                : null;
-
-            if (
-                maxDateValidated?.isBefore(date) &&
-                isDateInputWithTwoDigitYear(dateString)
-            ) {
-                date.adjust({ period: 'Y', offset: -100 });
-            }
+            // Kan vi fjerne dette?
path: packages/ffe-datepicker-react/src/datepicker/DatepickerComp.tsx
user: login: tuva-odegard
body: Når jeg tester nå så fungerer det med å autocomplete til 20- i alle fall. MaxDate fungerer ikke å putte inn på storybook, så får ikke testet om maxdate påvirker om den velger 19 eller 29. Usikker på hva denne koden gjør i så fall, men ikke fan av å ha kommentert ut kode liggende. Så heller fjern den hvis vi ikke skal bruke den!
created_at: 2025-04-03T07:15:09Z
author_association: CONTRIBUTOR
diff_hunk: @@ -117,16 +117,17 @@ export const DatepickerComp: React.FC<DatepickerCompProps> = ({
     const validateDateIntervals = useCallback(() => {
         const dateString = formatDate();
         getSimpleDateFromString(dateString, date => {
-            const maxDateValidated = maxDateProp
-                ? getSimpleDateFromString(maxDateProp)
-                : null;
-
-            if (
-                maxDateValidated?.isBefore(date) &&
-                isDateInputWithTwoDigitYear(dateString)
-            ) {
-                date.adjust({ period: 'Y', offset: -100 });
-            }
+            // Kan vi fjerne dette?
path: packages/ffe-datepicker-react/src/datepicker/DatepickerComp.tsx
user: login: dagfrode
body: Enig. Kommenterte det ut for å diskutere det. Jeg legger det tilbake igjen
created_at: 2025-04-03T12:04:55Z
author_association: CONTRIBUTOR
diff_hunk: @@ -45,4 +46,40 @@ describe('<InputGroup><Datepicker /></InputGroup>', () => {
 
         expect(datepicker.getValue()).toStrictEqual('06.05.2024');
     });
+
+    it('datepicker can be updated by testing functions to empty', async () => {
+        renderDatePicker({ value: '01.01.2024' });
+
+        const datepicker = getDatepickerByLabelText('Datovelger');
+        await datepicker.setValue('');
+
+        expect(datepicker.getValue()).toBeNull();
+    });
+
+    it('2 number year date works', async () => {
+        renderDatePicker({ value: '01.01.2024' });
+
+        const datepicker = getDatepickerByLabelText('Datovelger');
+        await datepicker.setValue('02.02.28');
+
+        expect(datepicker.getValue()).toStrictEqual('02.02.2028');
+    });
+
+    it('3 number year date works', async () => {
+        renderDatePicker({ value: '01.01.2024' });
+
+        const datepicker = getDatepickerByLabelText('Datovelger');
+        await datepicker.setValue('02.02.128');
+
+        expect(datepicker.getValue()).toStrictEqual('02.02.2128');
+    });
+
+    it('no year turns into current year', async () => {
path: packages/ffe-datepicker-react/src/datepicker/DatepickerInContext.spec.tsx
user: login: tuva-odegard
body: Nice!
created_at: 2025-04-04T07:03:13Z
author_association: CONTRIBUTOR
diff_hunk: @@ -45,4 +46,40 @@ describe('<InputGroup><Datepicker /></InputGroup>', () => {
 
         expect(datepicker.getValue()).toStrictEqual('06.05.2024');
     });
+
+    it('datepicker can be updated by testing functions to empty', async () => {
path: packages/ffe-datepicker-react/src/datepicker/DatepickerInContext.spec.tsx
user: login: tuva-odegard
body: Skjønner ikke helt hva denne prøver å si, hva betyr functions to empty? Kunne det vært mer beskrivende?
created_at: 2025-04-04T07:03:58Z
author_association: CONTRIBUTOR
diff_hunk: @@ -45,4 +46,40 @@ describe('<InputGroup><Datepicker /></InputGroup>', () => {
 
         expect(datepicker.getValue()).toStrictEqual('06.05.2024');
     });
+
+    it('datepicker can be updated by testing functions to empty', async () => {
+        renderDatePicker({ value: '01.01.2024' });
+
+        const datepicker = getDatepickerByLabelText('Datovelger');
+        await datepicker.setValue('');
+
+        expect(datepicker.getValue()).toBeNull();
+    });
+
+    it('2 number year date works', async () => {
path: packages/ffe-datepicker-react/src/datepicker/DatepickerInContext.spec.tsx
user: login: tuva-odegard
body: "Works" 😅 Burde kanskje beskrive hva "works" er?
created_at: 2025-04-04T07:04:29Z
author_association: CONTRIBUTOR
diff_hunk: @@ -45,4 +46,40 @@ describe('<InputGroup><Datepicker /></InputGroup>', () => {
 
         expect(datepicker.getValue()).toStrictEqual('06.05.2024');
     });
+
+    it('datepicker can be cleared by testing function', async () => {
+        renderDatePicker({ value: '01.01.2024' });
+
+        const datepicker = getDatepickerByLabelText('Datovelger');
+        await datepicker.setValue('');
+
+        expect(datepicker.getValue()).toBeNull();
+    });
+
+    it('2 number year date is updated to correct 4 number year', async () => {
+        renderDatePicker({ value: '01.01.2024' });
+
+        const datepicker = getDatepickerByLabelText('Datovelger');
+        await datepicker.setValue('02.02.28');
+
+        expect(datepicker.getValue()).toStrictEqual('02.02.2028');
+    });
+
+    it('3 number year date is updated to correct 4 number year', async () => {
+        renderDatePicker({ value: '01.01.2024' });
+
+        const datepicker = getDatepickerByLabelText('Datovelger');
+        await datepicker.setValue('02.02.128');
+
+        expect(datepicker.getValue()).toStrictEqual('02.02.2128');
+    });
+
+    it('no year is updated to correct 4 number year', async () => {
+        renderDatePicker({ value: '01.01.2023' });
+
+        const datepicker = getDatepickerByLabelText('Datovelger');
+        await datepicker.setValue('02.02.');
+
+        expect(datepicker.getValue()).toStrictEqual('02.02.2025');
path: packages/ffe-datepicker-react/src/datepicker/DatepickerInContext.spec.tsx
user: login: tuva-odegard
body: ahhh så ikke denne før nå. Sorry!! Men litt kjipt om testene feiler 01.01 neste år. new Date().getYear? 
created_at: 2025-04-04T07:59:07Z
author_association: CONTRIBUTOR
diff_hunk: @@ -45,4 +46,40 @@ describe('<InputGroup><Datepicker /></InputGroup>', () => {
 
         expect(datepicker.getValue()).toStrictEqual('06.05.2024');
     });
+
+    it('datepicker can be cleared by testing function', async () => {
+        renderDatePicker({ value: '01.01.2024' });
+
+        const datepicker = getDatepickerByLabelText('Datovelger');
+        await datepicker.setValue('');
+
+        expect(datepicker.getValue()).toBeNull();
+    });
+
+    it('2 number year date is updated to correct 4 number year', async () => {
+        renderDatePicker({ value: '01.01.2024' });
+
+        const datepicker = getDatepickerByLabelText('Datovelger');
+        await datepicker.setValue('02.02.28');
+
+        expect(datepicker.getValue()).toStrictEqual('02.02.2028');
+    });
+
+    it('3 number year date is updated to correct 4 number year', async () => {
+        renderDatePicker({ value: '01.01.2024' });
+
+        const datepicker = getDatepickerByLabelText('Datovelger');
+        await datepicker.setValue('02.02.128');
+
+        expect(datepicker.getValue()).toStrictEqual('02.02.2128');
+    });
+
+    it('no year is updated to correct 4 number year', async () => {
+        renderDatePicker({ value: '01.01.2023' });
+
+        const datepicker = getDatepickerByLabelText('Datovelger');
+        await datepicker.setValue('02.02.');
+
+        expect(datepicker.getValue()).toStrictEqual('02.02.2025');
path: packages/ffe-datepicker-react/src/datepicker/DatepickerInContext.spec.tsx
user: login: dagfrode
body: No wrorries, er jeg som skal beklage, er jeg som var lat

created_at: 2025-04-04T09:16:15Z
author_association: CONTRIBUTOR
diff_hunk: @@ -45,4 +46,40 @@ describe('<InputGroup><Datepicker /></InputGroup>', () => {
 
         expect(datepicker.getValue()).toStrictEqual('06.05.2024');
     });
+
+    it('datepicker can be cleared by testing function', async () => {
+        renderDatePicker({ value: '01.01.2024' });
+
+        const datepicker = getDatepickerByLabelText('Datovelger');
+        await datepicker.setValue('');
+
+        expect(datepicker.getValue()).toBeNull();
+    });
+
+    it('2 number year date is updated to correct 4 number year', async () => {
+        renderDatePicker({ value: '01.01.2024' });
+
+        const datepicker = getDatepickerByLabelText('Datovelger');
+        await datepicker.setValue('02.02.28');
+
+        expect(datepicker.getValue()).toStrictEqual('02.02.2028');
+    });
+
+    it('3 number year date is updated to correct 4 number year', async () => {
+        renderDatePicker({ value: '01.01.2024' });
+
+        const datepicker = getDatepickerByLabelText('Datovelger');
+        await datepicker.setValue('02.02.128');
+
+        expect(datepicker.getValue()).toStrictEqual('02.02.2128');
+    });
+
+    it('no year is updated to correct 4 number year', async () => {
+        renderDatePicker({ value: '01.01.2023' });
+
+        const datepicker = getDatepickerByLabelText('Datovelger');
+        await datepicker.setValue('02.02.');
+
+        expect(datepicker.getValue()).toStrictEqual('02.02.2025');
path: packages/ffe-datepicker-react/src/datepicker/DatepickerInContext.spec.tsx
user: login: dagfrode
body: Oppdatert
created_at: 2025-04-04T09:19:26Z
author_association: CONTRIBUTOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-04-01T09:34:03Z
body: Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-2739.westeurope.2.azurestaticapps.net
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-04-01T10:34:28Z
body: Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-2739.westeurope.2.azurestaticapps.net
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-04-01T14:41:19Z
body: Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-2739.westeurope.2.azurestaticapps.net
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-04-02T08:14:53Z
body: Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-2739.westeurope.2.azurestaticapps.net
author_association: NONE
user: login: dagfrode
created_at: 2025-04-03T06:57:38Z
body: > Burde ikke være 3 forskjellige commits på 1 pakke kanskje?

Skal ta å rett opp i committene

author_association: CONTRIBUTOR
user: login: dagfrode
created_at: 2025-04-03T06:57:58Z
body: feil knapp :sweat_smile: 

author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-04-03T07:03:25Z
body: Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-2739.westeurope.2.azurestaticapps.net
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-04-03T12:18:29Z
body: Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-2739.westeurope.2.azurestaticapps.net
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-04-04T07:59:24Z
body: Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-2739.westeurope.2.azurestaticapps.net
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-04-04T09:24:21Z
body: Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-2739.westeurope.2.azurestaticapps.net
author_association: NONE
user: login: tuva-odegard
created_at: 2025-04-04T10:53:10Z
body: .... ahhhh trodde jeg testet alt i stad. Men calender og dateinput er ikke synca på år-fallbacken tydeligvis.....
![image](https://github.com/user-attachments/assets/95801bc1-a06b-402b-8ebb-9a8feabb0128)

author_association: CONTRIBUTOR
user: login: dagfrode
created_at: 2025-04-04T14:22:50Z
body: > ahhhh trodde jeg testet alt i stad. Men calender og dateinput er ikke synca på år-fallbacken tydeligvis.....

![](https://media.giphy.com/media/wLG70BswTt0Nq/giphy.gif?cid=790b7611fzea1dl8hz9dpnyndrz67jbwdy97fv9avvjwzjeh&ep=v1_gifs_search&rid=giphy.gif&ct=g)

Hade jeg ikke engang tenkt på å teste. Hørs ut som et mandagsproblem :sweat_smile: 
author_association: CONTRIBUTOR
user: login: dagfrode
created_at: 2025-04-07T07:35:08Z
body: > .... ahhhh trodde jeg testet alt i stad. Men calender og dateinput er ikke synca på år-fallbacken tydeligvis.....

Trakk dette ut i en egen feil da den er der i dag: https://github.com/SpareBank1/designsystem/issues/2753
Så på den i 15 min, ble ikke noe klokere. Vil få inn denne så betling kommer seg videre.
author_association: CONTRIBUTOR