Combobox: 🐛 Fix scroll issue when using arrow keys in list (#3299)

navikt · Oct 30, 2024 · 76937a0 · 76937a0
1 parent 1ac9ec2
commit 76937a0
Show file tree

Hide file tree

Showing 5 changed files with 3 additions and 13 deletions.
diff --git a/.changeset/silver-dingos-mate.md b/.changeset/silver-dingos-mate.md
@@ -3,4 +3,4 @@
 "@navikt/ds-css": patch
 ---
 
-Combobox: only apply filteredOptions scroll offset when max options is rendered
+Combobox: :bug: Fix scroll issue when using arrow keys to navigate list
diff --git a/@navikt/core/css/darkside/form/combobox.darkside.css b/@navikt/core/css/darkside/form/combobox.darkside.css
@@ -305,10 +305,6 @@
   border: 1px solid var(--ac-combobox-list-item-max-selected-border, var(--a-border-info));
 }
 
-.navds-combobox__list--max-selected .navds-combobox__list-item {
-  scroll-margin-top: 50px;
-}
-
 .navds-combobox__list_non-selectables:hover {
   cursor: default;
 }

diff --git a/@navikt/core/css/form/combobox.css b/@navikt/core/css/form/combobox.css
@@ -305,10 +305,6 @@
   border: 1px solid var(--ac-combobox-list-item-max-selected-border, var(--a-border-info));
 }
 
-.navds-combobox__list--max-selected .navds-combobox__list-item {
-  scroll-margin-top: 50px;
-}
-
 .navds-combobox__list_non-selectables:hover {
   cursor: default;
 }

diff --git a/@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx b/@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx
@@ -58,9 +58,7 @@ const FilteredOptions = () => {
         <ul
           ref={setFilteredOptionsRef}
           role="listbox"
-          className={cl("navds-combobox__list-options", {
-            "navds-combobox__list--max-selected": maxSelected?.isLimitReached,
-          })}
+          className="navds-combobox__list-options"
         >
           {isValueNew && !maxSelected?.isLimitReached && allowNewValues && (
             <AddNewOption />

diff --git a/@navikt/core/react/src/form/combobox/FilteredOptions/useVirtualFocus.ts b/@navikt/core/react/src/form/combobox/FilteredOptions/useVirtualFocus.ts
@@ -45,7 +45,7 @@ const useVirtualFocus = (
 
   const setActiveAndScrollToElement = (element?: HTMLElement) => {
     setActiveElement(element);
-    element?.scrollIntoView?.({ block: "nearest" });
+    element?.scrollIntoView?.({ block: "center" });
   };
 
   const moveFocusUp = () => {