Opdatering af Datovælger-komponent

[bekworks]

Navn i designsystemet (Feature name in the design system) Datovælger

Link til det der skal opdateres (URL to what needs to be updated) https://designsystem.dk/kode/komponenter/datovaelger/ https://github.com/detfaellesdesignsystem/dkfds-components/blob/master/src/js/components/date-picker.js

Skyldes dit forslag et problem? Beskriv venligst. (Is your update request related to a problem? Please describe.) Vi er løbet ind i 3 problemer ved brug af Datovælger:

1. KeyUp event på "Enter" knappen emitter intet event
2. Change event på input indeholder ikke korrekt data, indtastet data bliver sendt som tom string
3. Afledt af nummer 2; Change event på input emitter intet event hvis der ikke er sket ændringer jf. nummer 2

Lidt flere detaljer og baggrund for hvorfor disse er vigtige

(1) Enter KeyUp Event Hvis Datovælger er det sidste element i en form der skal indsendes, og hvis brugeren ikke ønsker at bruge kalender-funktionen, men derimod manuelt indtaste en dato, kan brugeren ikke ved brug af "Enter" knappen, indsende formularen. I vores tilfælde har vi brug for at kunne køre validering på formen som en helhed og herefter indsende den, når der trykkes på "Enter" knappen.

(2, 3) Change Event, forkert data og manglende emits For at sikre god UX, har vi i vores løsning en validering der kører på alle indtastningsfelter, der ved ugyldigt input viser en fejlbesked efter enten 1 sekund eller ved blur event. Dette gør vi for at undgå aggressive fejlbeskeder, imens brugeren er ved at indtaste information. - Når brugeren fortsætter med sin indtastning, fjerner vi fejlbeskeden og starter forfra med valideringen.

Denne valideringsform afhænger af det Change Event der emittes fra Datovælger input feltet, men den nuværende Datovælger emitter kun 2 states: Korrekt dato og ukorrekt dato efter en korrekt dato allerede var indtastet. Dette efterlader os uden validering:

Dette kan observeres ved at bruge følgende steps:

1. Opsæt en side med Datovælger
2. Smid en change handler på input feltet i din kode, der blot logger værdien der bliver givet
3. Load siden i din browser og åben developer console
4. Indtast tallet "1" i input feltet
5. Observer at der intet kommer frem i konsollen, på trods af at du nu har lavet en ændring
6. Fortsæt med at indtaste manuelt indtil du har en korrekt dato i feltet (f.eks. 10/12/2020).
7. Observer at der først forekommer et Change Event når du indtaster det sidste tal
8. Læg mærke til værdien for details.value
9. Slet nu det sidste tal du har indtastet (så der f.eks. står 10/12/202 i feltet
10. Observer at der nu kommer et Change Event, men at værdien for details.value ikke er korrekt jf. hvad der står i feltet
11. Fortsæt med at slette det du har indtastet
12. Observer at der nu igen ikke længere forekommer Change Events, selv om du har foretaget ændringer i feltet

Beskriv det du gerne ser ske. (Describe the solution you'd like) Der er to måder at løse problemet på:

1. Opdater datovælgeren til at emitte de korrekte events, på de korrekte tidspunkter. Dvs. at den skal emitte når der trykkes på "Enter" knappen. Den skal emitte alle change events, med korrekt data og ikke bare en tom string som værdi hvis ikke det indtastede er en korrekt dato.

Eller

2. Løsriv kalender komponenten fra Datovælger komponenten, således at det er muligt at have fuld kontrol over vores custom input felt, samtidig med at vi har en kalender vi kan åbne og vælge dato i. I dette tilfælde ville kalender komponenten blot skulle fungerer som den gør i dag, men dog emitte et Change Event når der vælges en dato.

Sidstnævnte vil nok være den hurtigste løsning, hvor førstnævnte vil være den korrekte løsning, så man følger konventionelle retningslinjer for brug af events (der skal aldrig blokeres for events, med mindre komponenten afhænger af det for at kunne fungere)

Beskriv de alternativer du har overvejet. (Describe alternatives you've considered)

• Vi har prøvet at lytte på andre events end Changed Event, men de andre events der kan bruges (KeyUp og KeyDown) bliver også blokeret af komponenten

Det er muligt at lave en timer der kører på siden, ca. hver 50ms der henter værdien udfra DOM elementet, men rent performance mæssigt er det ikke en holdbar løsning, hvorfor vi har været nødsaget til at benytte os af en helt anden kalenderløsning.

[detfaellesdesignsystem]

Hej @bekworks

Tak for henvendelsen!

Vi har oprettet en sag på det og vil vende tilbage når vi har kigget nærmere på det.

Med venlig hilsen Kristina Jensen Det Fælles Designsystem

[detfaellesdesignsystem]

Hej @bekworks,

Vi har tilføjet dokumentation på funktioner på kodesiden for Datovælgeren i den kommende v8.0, som kan hjælpe til at få fat i de rette elementer.

Der er tale om javascript funktionen DKFDS.datePicker.getDatePickerContext(ELEMENT), hvor man kan sende et vilkårligt element fra datovælgeren med, som så returnerer et objekt med alle elementer tilknyttet datovælgeren. På den måde kan man både få fat i internal og external input elementer, og herfra sætte eventlisteners på de rette elementer.

Datovælgeren er baseret på USWDS' datepicker komponent. Vi har indtil videre valgt ikke at ændre i datovælgeren som foreslået, da der er nyere versioner af datovælgeren hos USWDS som vi gerne vil opdatere til samt features vi gerne vil understøtte i vores egen datovælger. Der er blandt andet tale om en til/fra version af datovælgeren.

Med venlig hilsen Kristina Jensen Det Fælles Designsystem