From 7e3cf7991408393690395cdbfc52b95229e6086a Mon Sep 17 00:00:00 2001
From: Joar Aurdal <joar.aurdal@nav.no>
Date: Fri, 8 Nov 2024 08:29:55 +0100
Subject: [PATCH] =?UTF-8?q?Fors=C3=B8k=20comboboks=20janzz=20uten=20=C3=A5?=
 =?UTF-8?q?=20bruke=20ref?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../edit/om-stillingen/janzz/Janzz.tsx        | 35 ++++++++-----------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/src/stilling/stilling/edit/om-stillingen/janzz/Janzz.tsx b/src/stilling/stilling/edit/om-stillingen/janzz/Janzz.tsx
index 90363f2b..ae314d2c 100644
--- a/src/stilling/stilling/edit/om-stillingen/janzz/Janzz.tsx
+++ b/src/stilling/stilling/edit/om-stillingen/janzz/Janzz.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useState, useRef } from 'react';
+import React, { FunctionComponent, useState } from 'react';
 import css from './Janzz.module.css';
 import { SET_EMPLOYMENT_JOBTITLE, SET_JANZZ } from '../../../adDataReducer';
 import { useDispatch, useSelector } from 'react-redux';
@@ -19,24 +19,23 @@ const Janzz: FunctionComponent<Props> = ({ tittel }) => {
     const [input, setInput] = useState<string>(tittel);
     const [hasValidSelection, setHasValidSelection] = useState<boolean>(true);
 
-    const optionSelectedRef = useRef(false);
-
     const { data: suggestions, isLoading, error } = useHentJanzzYrker(input);
 
+    const filteredSuggestions = suggestions
+        ? suggestions
+              .filter((f) => f.styrk08 && f.styrk08.trim() !== '' && f.styrk08 !== '9999')
+              .map((f) => f.label)
+        : [];
+
     const onChange = (event: React.ChangeEvent<HTMLInputElement> | null, value?: string) => {
-        const newValue = event?.target?.value || value || '';
+        const newValue = event?.target.value || value || '';
         setInput(newValue);
-
-        if (optionSelectedRef.current) {
-            optionSelectedRef.current = false;
-        } else {
-            setHasValidSelection(false);
-        }
+        setHasValidSelection(false); // Assume invalid until selection is made
     };
 
-    const onToggleSelected = (option: string, isSelected: boolean) => {
-        if (isSelected && suggestions) {
-            const found = suggestions.find(
+    const onToggleSelected = (option: string, isSelected: boolean, isCustomOption: boolean) => {
+        if (isSelected) {
+            const found = suggestions?.find(
                 (forslag) => forslag.label.toLowerCase() === option.toLowerCase()
             );
             if (found) {
@@ -54,8 +53,10 @@ const Janzz: FunctionComponent<Props> = ({ tittel }) => {
                 dispatch({ type: SET_JANZZ, kategori });
                 setInput(capitalizeEmployerName(found.label) || '');
                 setHasValidSelection(true);
-                optionSelectedRef.current = true; // For å unngå resetting av validselection i onChange
             }
+        } else {
+            setHasValidSelection(false);
+            dispatch({ type: SET_JANZZ, kategori: undefined });
         }
     };
 
@@ -67,12 +68,6 @@ const Janzz: FunctionComponent<Props> = ({ tittel }) => {
 
     const feilmeldingTilBruker = error ? error.message : undefined;
 
-    const filteredSuggestions = suggestions
-        ? suggestions
-              .filter((f) => f.styrk08 && f.styrk08.trim() !== '' && f.styrk08 !== '9999')
-              .map((f) => f.label)
-        : [];
-
     return (
         <div>
             <UnsafeCombobox