navikt / aksel

NAVs designsystem og Aksel-portalen
https://aksel.nav.no
MIT License
158 stars 42 forks source link

[Innspill til komponent]: <Combobox /> – Autocomplete frå treff inni strengar #2594

Closed ingfo closed 3 months ago

ingfo commented 10 months ago

Tilbakemelding

Hei!

Kort: Det hadde vore supert om komponenten støtta søke etter deler av ord eller frasar "ut av boksen". Eit døme er å kunne få opp "A New Hope" ved søketeksten "New Hope".

Lang:

I tida mi på Team Pia var vi borti to litt ulike brukstilfeller der mangel på søking/autocomplete midt i ein streng gjorde det vanskeleg å bytte frå ReactSelect til designsystemet sin .

Fyrste tilfelle: Teamet har ein komboboks der ein skal kunne velje ein eller fleire kommunar i Noreg. Fleire kommunar har både samiske og norske namn og brukarane våre ynskjer at begge skal vere søkbare.

Kommunar som har eit norsk namn i tillegg til det offisielle samiske vert i dag vist som Offisielt namn (norsk namn), til dømes Deatnu (Tana) eller Unjárga (Nesseby)

Slik søk/autocomplete i fungerer i dag vil ein ikkje få søketreff på "Tana".

Andre tilfelle: Komboboks for å velje saksbehandlarar slik at ein kan sjå sakane til ein brukar eller eit team. I dag viser vi fornamn og etternamn. ReactSelect tek inn ei liste av objekt med nøkkel/verdi-par. Vi har gjeve den nav-identar til nøklar (det er desse vi bruker som parametrar i api-kall) og namn (som vert visa i rullegardinlista med autofullfør). Brukarar kan søke på namn eller ident.

Vi trur vi kan løyse denne også ved å slå saman ident og namn til ei streng om søking midt i ord går an. Det vil ikkje gje oss tilgang til identen frå comboboksen sin ‘value’, men hjelpe oss eit stykke på veg.

(Etter at eg kladda denne tilbakemeldinga har eg lært at vi kanskje kan løyse utfordringane våre ved å gjere om komponenten til ein Controlled Component. Sidan vi mistenker fleire team vil ha den same problemstillinga tenkte vi det var praktisk å lufte problemet uansett. Det kan godt hende at løysinga er å vise eit døme på aksel.no med korleis ein brukar combobox som Controlled Component.)

-- Team Pia i POAG, v/ eks-medlem Ingrid

it-vegard commented 9 months ago

Hei! Beklager seint svar. Denne gikk litt i glemmeboksen oppi tertialplanleggingen på starten av året.

Søk kan gjøres utenfor komponenten også, ja. Altså som en controlled component.

Ellers leser jeg to behov ut fra teksten over: 1) Fuzzy search/treff inne i teksten 2) Søk på synonymer/andre verdier

Det første behovet (fuzzy search) er også bedt om her: https://github.com/navikt/aksel/issues/2223 Siden flere har tatt opp behovet, så bør vi nok se om det er mulig. Vi hadde det i en tidlig versjon av Combobox, men det ble noe rot med at mindre relative treff kom før de direkte treffene. Så kanskje vi må gjøre søket litt smartere, ved å først liste opp de treffene som starter på samme teksten, og så "andre treff". Ville det fungere for dere?

Det andre behovet (søk på synonymer) vil nok dekkes når vi legger til støtte for å sende inn options som objekter. Vi skal se på format, men det blir garantert en eller annen støtte for å søke på både nøkkel og verdi (value og displayText), men kanskje vi kan ha "synonyms" som en liste også? 🤷 Vi har ikke startet på oppgaven enda, men jeg ser for meg å ta begynne på den i løpet av kort tid.

Vi har et eksempel på controlled Combobox, men jeg skal se om vi kan endre det til å vise bedre frem hvordan det kan brukes for custom søk.

it-vegard commented 3 months ago

Vi har nå merget et forbedret søk, der vi viser treff inne i teksten også. Dette kommer ut i neste versjon av ds-react, sannsynligvis i starten av neste uke.

Vi vil se på om vi kan få inn f.eks. en liste med synonymer/alternativer per option, slik at det er mulig å få treff på også ident, etc. Kommer tilbake til dere om/når vi får løst det.