detfaellesdesignsystem / dkfds-components

Styling og komponenter
Other
44 stars 13 forks source link

Datovælger - Ingen events fra input feltet #238

Open JohnnyChenJiaHao opened 4 months ago

JohnnyChenJiaHao commented 4 months ago

Beskriv dit behov for hjælp. (Describe your need for help.) Jeg har brug for hjælp til at få fat i events fra input feltet fra datovælgeren. Har prøvet @blur (onBlur), @input (onInput), @keyup, @keydown og ref uden held

Jeg er interreseret i at vide når brugeren er igang med at indtaste i input feltet eller vide når feltetet bliver fokuseret eller mister fokus, etc.

Det eneste event der emittes er change som åbenbart kun emittes når det er en gyldig dato i input feltet fra kalender vælgeren.

Der er ingen måde at vide når brugeren ændre direkte i input feltet til en gyldig eller ugyldig dato. Med nedestående kode prøv at ændre direkte i input feltet fra gyldig til ugyldig dato og verse versa -> ingen events vil blive emittet

Kode eksempel for input events: ` <div class="date-picker"

<input id="id" type="text" name=pname" class="form-input" @change="onChange" @input="onInput" @blur="onBlur" />

`

const onChange= (event) => { console.log(event, "change event");}; // Kun events bruger kaldener vælgeren

const onInput = (event) => { console.log(event, "input event"); }; // ingen events

const onBlur = (event) => { console.log(event, "blur event");}; // ingen events


Dette gør jeres datovælger komponent desværre ubrugelig især hvis man vil validere feltet og vise en fejl meddelse efter brugeren har indtastet i input feltet, skal gemme værdien eller formatere værdien.

Lad mig vide hvis der er noget der er misforstået mht. til dette komponent

Hvor opstår behovet? (Where do the need for help arise?) Lytte til events fra input feltet i datovælgeren.

Indsæt link (Add a URL) Omhandler datovælger komponenten: https://designsystem.dk/komponenter/datovaelger/#kode

Screenshots dkfds-date-picker

Desktop OS: [e.g. iOS] Browser [chromei] Version [127.0.6533.73]

detfaellesdesignsystem commented 3 months ago

Hej @JohnnyChenJiaHao

Tak for din henvendelse!

Når datovælgeren er blevet initialiseret, så har den efterfølgende to inputfelter, og jeg tror det er dét, som giver dig problemer.

Ved initialiseringen bliver inputfeltet klonet med cloneNode() og herefter skjult. Det klonede (nye) inputfelt er det, som er synligt for brugeren, men det du har sat dine listeners på er det skjulte felt. De to inputfelter har hhv. klasserne date-picker__internal-input og date-picker__external-input i HTML'en.

Det skjulte felt opdateres, når datoen opdateres, hvilket er grunden til, at du får et change event - men da brugeren hverken skriver, fokuserer eller på anden vis interagerer med det skjulte felt, så får du ingen af disse events.

Jeg håber, at ovenstående kan give en forklaring på de problemer, du oplever. Vi er allerede opmærksomme på, at datovælgeren kan forbedres, og jeg har oprettet en sag på din henvendelse.

Med venlig hilsen Helle Juhl Det Fælles Designsystem