Fikser piltastnavigering i søket ved gjentatte søk med likt antall treff

navikt · Feb 20, 2024 · ec5fefd · ec5fefd
1 parent 21199ba
commit ec5fefd
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/src/komponenter/header/header-regular/common/sok/Sok.tsx b/src/komponenter/header/header-regular/common/sok/Sok.tsx
@@ -8,7 +8,7 @@ import cls from 'classnames';
 import { Locale } from 'store/reducers/language-duck';
 import { SokInput } from './sok-innhold/SokInput';
 import Spinner from '../spinner/Spinner';
-import { Sokeresultat } from './utils';
+import { Sokeresultat, Soketreff } from './utils';
 import SokResultater from './sok-innhold/SokResultater';
 import { Environment } from 'store/reducers/environment-duck';
 import Cookies from 'js-cookie';
@@ -18,11 +18,13 @@ interface Props {
     id: string;
     isOpen: boolean;
     dropdownTransitionMs?: number;
-    numResultsCallback?: (numResults: number) => void;
+    searchHitsCallback?: (result: Soketreff[]) => void;
     searchInput: string;
     setSearchInput: (searchInput: string) => void;
 }
 
+const MAX_HITS_TO_DISPLAY = 5;
+
 const stateSelector = (state: AppState) => ({
     environment: state.environment,
     language: state.language.language,
@@ -37,8 +39,7 @@ const Sok = (props: Props) => {
     const [loading, setLoading] = useState<boolean>(false);
     const [result, setResult] = useState<Sokeresultat | undefined>();
     const [error, setError] = useState<string | undefined>();
-    const { searchInput, setSearchInput } = props;
-    const numberOfResults = 5;
+    const { searchInput, setSearchInput, searchHitsCallback } = props;
     const klassenavn = cls('sok-input', {
         engelsk: language === Locale.ENGELSK,
     });
@@ -50,8 +51,14 @@ const Sok = (props: Props) => {
     }, [props.isOpen]);
 
     useEffect(() => {
-        if (result && props.numResultsCallback) {
-            props.numResultsCallback(Math.min(result.hits.length, numberOfResults));
+        if (!searchHitsCallback) {
+            return;
+        }
+
+        if (result?.hits) {
+            searchHitsCallback(result.hits.slice(0, MAX_HITS_TO_DISPLAY));
+        } else {
+            searchHitsCallback([]);
         }
     }, [result]);
 
@@ -122,7 +129,7 @@ const Sok = (props: Props) => {
                             <SokResultater
                                 writtenInput={searchInput}
                                 result={result}
-                                numberOfResults={numberOfResults}
+                                numberOfResults={MAX_HITS_TO_DISPLAY}
                                 language={language}
                                 fetchError={error}
                             />

diff --git a/src/komponenter/header/header-regular/desktop/sok-dropdown/SokDropdown.tsx b/src/komponenter/header/header-regular/desktop/sok-dropdown/SokDropdown.tsx
@@ -10,6 +10,8 @@ import { useKbNavSub } from 'utils/keyboard-navigation/useKbNavSub';
 import { configForNodeGroup } from 'utils/keyboard-navigation/kb-navigation-setup';
 import { KbNavGroup } from 'utils/keyboard-navigation/kb-navigation';
 import { SokKnapp } from 'komponenter/header/header-regular/desktop/sok-dropdown/sok-knapp/SokKnapp';
+import { Soketreff } from '../../common/sok/utils';
+
 import 'komponenter/header/header-regular/desktop/sok-dropdown/SokDropdown.scss';
 
 export const sokDropdownClassname = 'desktop-sok-dropdown';
@@ -27,8 +29,9 @@ type Props = {
 export const SokKnappDesktop = ({ kbNavMainState }: Props) => {
     const { isOpen } = useSelector(stateSelector);
     const [searchInput, setSearchInput] = useState<string>('');
-    const [numResults, setNumResults] = useState(0);
-    useKbNavSub(configForNodeGroup[KbNavGroup.Sok], kbNavMainState, isOpen, numResults);
+    const [searchHits, setSearchHits] = useState<Soketreff[]>([]);
+
+    useKbNavSub(configForNodeGroup[KbNavGroup.Sok], kbNavMainState, isOpen, searchHits);
 
     useEffect(() => {
         const dropdownElement = document.getElementById(sokDropdownClassname) as HTMLElement;
@@ -52,7 +55,7 @@ export const SokKnappDesktop = ({ kbNavMainState }: Props) => {
                     isOpen={isOpen}
                     id={desktopSokInputId}
                     dropdownTransitionMs={dropdownTransitionMs}
-                    numResultsCallback={setNumResults}
+                    searchHitsCallback={setSearchHits}
                     searchInput={searchInput}
                     setSearchInput={setSearchInput}
                 />