Combo filteredoptions offset fix #3269
Conversation
🦋 Changeset detectedLatest commit: b7e5d8a The changes in this PR will be included in the next version bump. This PR includes changesets to release 7 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Storybook demo5ed9d936c | 91 komponenter | 144 stories |
| @@ -58,7 +58,9 @@ const FilteredOptions = () => { | |||
| <ul | |||
| ref={setFilteredOptionsRef} | |||
| role="listbox" | |||
| className="navds-combobox__list-options" | |||
| className={cl("navds-combobox__list-options", { | |||
| "navds-combobox__list--max-selected": maxSelected?.isLimitReached, | |||
There was a problem hiding this comment.
| "navds-combobox__list--max-selected": maxSelected?.isLimitReached, | |
| "navds-combobox__list-options--max-selected": maxSelected?.isLimitReached, |
There was a problem hiding this comment.
ah, jeg laget en ny class for å treffe parent med max-selected 😓 (så slapp man legge den på alle items)
There was a problem hiding this comment.
teknisk sett følger fortsatt BEM her, bare at element blir list og ikke list-options 🤔. Er nok litt BEM-rot her som kan ryddes i også tenker jeg.
Prøvde opprinnelig å løse dette med :has() og uten kodeendring, men fant ingen løsning der.
There was a problem hiding this comment.
Slik jeg forstår det, skal man bruke det opprinnelige navnet når man lager en modifier-klasse, her "navds-combobox__list-options". Det er dessuten allerede et element som heter "navds-combobox__list".
Modifier is an extra class name which you add to a block/element DOM node. Add modifier classes only to blocks/elements they modify, and keep the original class.
Men :has() var en god idé, det burde jo funket... 🤔
|
I see now that scroll-margin-top doesn't always work in Chrome (not caused by these changes I think). I can reproduce it here. I select the 5 first items, plus the one on the bottom. When I use arrow keys to go from the last item and up, it only scrolls on every other item: Scrollbug.mp4My guess is that the browser doesn't take the scroll-margin-top into account when figuring out whether the element is in view or not. It only takes it into account when actually scrolling. At least when using "nearest". It can be fixed by changing |
Description
Fixes the minor visual bug / inconsistency where when you scroll upwards, there seems to be a 1 row offset from the top of the list to the focused option. This offset is only needed in the particular instance where the 'max X of Y' maximum limit is rendered. It's sticky so it lands on top of the actual content. This is why there is a margin.
Component Checklist 📝
@navikt/core/css/config/_mappings.js)@navikt/core/css/tokens.json)@navikt/aksel-stylelint/src/deprecations.ts)@navikt/core/react/src/index.tsand@navikt/core/react/package.json)@navikt/core/css/index.css)<Component>: <gitmoji?> <Text>.E.g. "Button: ✨ Add feature xyz.")