Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Combobox using Ariakit #218

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open

Conversation

ohp-inmeta
Copy link
Contributor

Describe your changes

New component MdComboBox, meant to replace MdAutocomplete. 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.

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?

@ohp-inmeta ohp-inmeta requested a review from a team as a code owner February 3, 2025 08:09
Copy link
Contributor

github-actions bot commented Feb 3, 2025

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

@ohp-inmeta ohp-inmeta linked an issue Feb 3, 2025 that may be closed by this pull request
@aurorascharff
Copy link
Contributor

aurorascharff commented Feb 5, 2025

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

@aurorascharff
Copy link
Contributor

aurorascharff commented Feb 5, 2025

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.

Feb-04-2025 08-45-32

@aurorascharff
Copy link
Contributor

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

Fixed issue where focus shifted to input field after selecting item with keyboard. Possibly also fixed weird focus border on zoomed out screens?
@ohp-inmeta
Copy link
Contributor Author

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
Copy link
Contributor Author

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
Copy link
Contributor

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

@ohp-inmeta
Copy link
Contributor Author

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

Kan legge på animasjon med css, dersom vi ønsker/trenger. Spiller ikke så stor rolle for min del, men kanskje noen har sterke meninger den ene eller andre veien?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Rewrite dropdown components to be accessible and free of bugs
2 participants