[Innspill til komponent]: <DatePicker /> Bedre valg av årstall

[ivoiv]

Tilbakemelding

Liker DatePicker komponenten veldig bra, men savner mulighet å velge årstall mer fritt.

Jobber med saksbehandling system hvor dato på ting kan være sånn 30år tilbake i tid så det er viktig å kunne enkelt bytte årstall.

Nå gjøres dette vel hovedsakelig via dropdownCaption. Problemet er at den krever fromDate og toDate, antar fordi det er ikke nok plass til alle årstall i den native select UI-en.

MUI har et godt forslag til en løsning som ser ganske mye ut som vår. Er dette noe vi kunne implementert eller er vi fastbestemt med native UI?

https://mui.com/x/react-date-pickers/getting-started/#FirstComponent.js

[KenAJoh]

Hei, i eksempelet til MUI er det endringen i selve input-feltet eller i selve popoveren som er tenkt her?

[ivoiv]

Popoveren tenke jeg. Den skrollbare listen av årstall er mye mer brukervennlig enn nettleseren sin native select UI.

[KenAJoh]

Enig i at det kan være mer brukervennlig for seende, men for brukere av skjermleser eller bare tastatur vil dette kunne være problematisk. MUI har valgt å løse det med en "infinite"-lang liste med knapper i div-er. Kunne blitt forbedret med ul > li, men vil fortsatt kreve at man tabber potensielt 10+, eller kanskje 100+ ganger på det verste.

Det fine med native select er "autoselect"-funksjonaliteten der selv om man har 100+ valg, så kan man skrive 1960 og nettleseren highlighter det valget (usikker på om hvor nettleser-spesifikt dette er)

https://user-images.githubusercontent.com/26967723/225928484-00d893c9-be93-4af0-bca3-9067cad390b7.mp4

Select med 40+ options er ikke den mest optimale løsningen, og blir diskutert diverse pros/cons i denne artikkelen som konkluderer med at man kanskje bør vurdere andre løsninger enn en Datepicker for valg av dato for ukjente og potensielt lengre perioder.

[ivoiv]

Navigasjon i årstall-velger i MUI løsningen skjer i likhet med tabeller via tastatur-pilene og ikke Tab. Tab brukes for å navigere frem og tilbake mellom "Minimer årstall-velger"-knappen og selve årstallene.

Jeg synes det bevarer UU for tastatur-navigasjon relativt godt.

Akkurat vårt behov kommer fra interne saksbehandling-systemer hvor tilrettelegging og UU er viktig men effektivitet er høyeste prio.

Native UI gir nok bedre brukeropplevelse for eksterne brukere, mobiltelefoner osv, mens jeg synes MUI gir bedre brukeropplevelse for saksbehandlere. Kan vi ikke ha en nativeSelectUI prop eller noe, som defaulter til native UI når man ikke har behov for mer avansert velger?

[KenAJoh]

Pratet litt med teamet og opprettet en oppgave på å teste konseptet 👍 Har ikke en ETA for når vi blir å se på dette, så for nå vil dagens løsning være eneste mulighet.