[Innspill til komponent]: <Combobox />

[vilderoxan]

Tilbakemelding

Hei! Når listen over søkeforslag er tom kommer det opp en tekst “Ingen søketreff”. Hadde det vært mulig å bestemme denne teksten selv? I vårt tilfelle betyr det ikke at det ikke er noe treff. Hvis listen er tom betyr det i vårt tilfelle at det ikke finnes forslag til søkeordet men man kan fortsatt få treff på søket hvis man trykker enter. At det står "Ingen søketreff" kan villede brukeren til å tro at de ikke kan søke på det de søker på. Å kunne bestemme denne teksten selv hadde løst mye.

[it-vegard]

Har i dag hatt en gjennomgang av komponenten med Vilde, og funnet noen områder der komponenten kommer til kort:

Når komponenten bruker eksterne chips finnes det ikke noen god indikator for hvordan komponenten brukes.

Vi har ikke "selected"-state i kompontenen, og ingen "søkeknapp" som indikerer at man bør trykke på "Enter" for å søke.

Forslag:
Legg til mulighet for en "søkeknapp" i komponenten. Denne bør fungere på samme måten som når man trykker "Enter" (trigg onToggleSelected) og kanskje ha tabIndex="-1" for å ikke legge til en tab-stopp. Den blir i så fall et "mouse-only"-element, slik som "Åpne/lukk". Evt. bør søkeknappen være i tab-rekkefølgen for å tydeliggjøre at dette er et søkefelt.

"Ingen søketreff" passer ikke når comboboxen brukes for filtrering til et hovedsøk

I Finn Hjelpemidler sitt eksempel er det ikke 1-til-1 mellom forslag i nedtrekkslisten og søketreffene i hovedsøket, så det er mulig å søke uten å ha treff i listen. "Legg til <søketekst>" er ikke treffende her.

Forslag:
Ha en prop for å sende inn tekst og/eller et element som kan legges til i slutten av listen med. f.eks. "Finn flere treff på <søketekst>". Her må vi se på design/utforming. Kanskje bør denne ha et "knappe-uttrykk"?
Se søket til Finn.no og Arbeidsplassen for eksempel.

I "Finn hjelpemidler" sin løsning har de mange forskjellige forslag som kan dukke opp i listen. Noen er produkter (produktnavn), noen er kategorier. Akkurat nå kan det være vanskelig å skille de, og listen virker litt rotete.

Forslag:
Det kan være vi bør se på muligheten for å legge til kategorier, slik vi har skissert i "Hjelp oss med Combobox" i Figma. Eller burde dette vært løst på en annen måte?

Et alternativ til forslagene over er en prop for type="search" eller lignende som gjør litt av det samme: Viser søkeknapp, endrer "Ingen søkeresultater" til "Finn flere treff på <søketekst>", etc.

[it-vegard]

Legger til lenke til repoet til Finn hjelpemidler for å kunne gå gjennom og se om det er noe vi kan optimalisere i bruken av komponenten: https://github.com/navikt/hm-oversikt-frontend/blob/main/src/app/sok/sidebar/internals/SearchCombobox.tsx