Combobox using Ariakit

[ohp-inmeta]

Describe your changes

New component MdComboBox, meant to replace MdAutocomplete and MdMultiAutocomplete. Uses Ariakit as base, which handles all necessary aria and accessibility-stuff.

Switch between multi- and single select with value-prop. If an array of strings the combobox is mulitselect, if string; single.

Example of usage in avfallsdeklarering:

Checklist before requesting a review

• I have performed a self-review and test of my code
• I have added label to the PR (major, minor or patch)
• If new component: Is story for component created in stories-folder?
• If new component: Is tsx-file import added to packages/react/index.tsx?
• If new component: Is css-file added to packages/css/index.css?

[github-actions]

Please set a versioning label of either major, minor, or patch to the pull request.

[aurorascharff]

Oppdaget at når man velger et element i lista med enter, så mister man fokus på lista og må "begynne på nytt".

[aurorascharff]

Legger inn eksemplet Ola sendte til meg som hans referanse: https://ariakit.org/examples/combobox-multiple
Så kan man teste litt mot det.

[ohp-inmeta]

Oppdaget at når man velger et element i lista med enter, så mister man fokus på lista og må "begynne på nytt".

Fikset

[ohp-inmeta]

Oppdaget at ved 90% zoom virke det som border ikke er 2px men 1px, og derfor blir padding feil når man fokuserer. I tillegg blir plasseringen i høyden til placeholder ikke alignet riktig.

Trolig også fikset, klarer ikke gjenskape lenger. Mulig dette løste seg når jeg fiksa den focus-saken? 🤔

[aurorascharff]

La merge til at dropdown-animasjonen ikke lenger er med. Men den er kanskje mest irriterende uansett?

La på frekk animasjon ved åpne/lukke 🥂

Daaaamnnn den var smooth! Komponenten er jo helt rå nå!

[ohp-inmeta]

La på en console.warn om deprecation på MdAutocomplete - vet ikke om det er lurt eller ikke?

[aurorascharff]

Får en litt rar oppførsel når dropdownen ikke får plass. Ser ut som den prøver å justere plasseringen sin, kanskje det burde skrus av?

](url)

[aurorascharff]

Vi bruker ofte error + errorText, det burde kanskje også være her? Eller er det best å gå bort i fra det?

[aurorascharff]

denne trigger når komponenten rendres. Det ødelegger for eksempel for skjemavalidering her:

                onSelectOption={value => {
                  console.log('value', value);
                  form.setFieldValue('ealHovedkapittel', value);

Siden setFieldValue har blitt touched pga komponenten trigget onSelectOption, får jeg "required" feilmelding før brukeren valgte noe.

Tror det er litt useeffect antipattern uansett, bedre at vi setter staten i eventen som trigger endringer i state:

     <Ariakit.ComboboxProvider
      id={comboBoxId}
      selectedValue={selectedValues}
      setSelectedValue={values => {
        setSelectedValues(values);
        onSelectOption(values);
      }}        

Jeg pusher den endringen nå for å teste videre! :)

[aurorascharff]

Har fremdeles litt trøbbel med at onSelect trigger en FPS drop og at ComboBoxItem rerendrer veldig mange ganger. Vi bør sjekke ut dette litt mer. Jeg debugger:

Sykt mange rerenders:

Ariakit har insane mange providers:

Det er ikke såå ille, men litt rart.
kan være det er noe galt i mitt prosjekt.

[aurorascharff]

Denne linja bør kanskje fjernes?

[aurorascharff]

La merge til at eslint-plugin ikke funker riktig for react-hooks, la det inn i denne branchen og fant dette:

Jeg fikser det nå!

[aurorascharff]

Fant ut at man må håndtere caset der values endres fra utenfor komponenten, eks i mitt tilfelle for en filtrering som har en "reset all filters"-knapp som resetter verdien i Combobox. Combobox sine selectedValues er ikke da lenger i sync med values.

Legger på en usEffect for å fikse det:
useEffect(() => {
setSelectedValues(value);
}, [value]);

Men. Hva skal vi gjøre med searchValue? Er det greit at den henger igjen? Da ser det litt ut som man har valgt noe.

Kan eventuelt da endre til dette:
useEffect(() => {
setSelectedValues(value);
if (!value) {
setSearchValue('');
}
}, [value]);

Det funker ganske bra: