FIX: more rendering of select options

Co-authored-by: PaulMartinKokseter <[email protected]>
navikt · Nov 12, 2024 · 0a37853 · 0a37853
1 parent 02aa022
commit 0a37853
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 34 deletions.
diff --git a/apps/frontend/src/components/DpProcess/common/FieldDpProcessDepartment.tsx b/apps/frontend/src/components/DpProcess/common/FieldDpProcessDepartment.tsx
@@ -21,10 +21,8 @@ const FieldDpProcessDepartment = (props: IFieldDpProcessDepartment) => {
             hideLabel
             value={value}
             onChange={(event) => {
-              if (event.target.value) {
-                setValue(event.target.value)
-                form.setFieldValue('affiliation.department', event.target.value)
-              }
+              setValue(event.target.value)
+              form.setFieldValue('affiliation.department', event.target.value)
             }}
           >
             <option value="">Velg avdeling</option>

diff --git a/apps/frontend/src/components/DpProcess/common/FieldDpProcessExternalProcessResponsible.tsx b/apps/frontend/src/components/DpProcess/common/FieldDpProcessExternalProcessResponsible.tsx
@@ -1,4 +1,4 @@
-import { Select, Value } from 'baseui/select'
+import { Select } from '@navikt/ds-react'
 import { Field, FieldProps } from 'formik'
 import { useState } from 'react'
 import { IDpProcessFormValues } from '../../../constants'
@@ -12,31 +12,29 @@ const FieldDpProcessExternalProcessResponsible = (
   props: IFieldDpProcessExternalProcessResponsible
 ) => {
   const { thirdParty } = props
-  const [value, setValue] = useState<Value>(
-    thirdParty
-      ? [
-          {
-            id: thirdParty,
-            label: codelist.getShortname(EListName.THIRD_PARTY, thirdParty),
-          },
-        ]
-      : []
-  )
+  const [value, setValue] = useState<string>(thirdParty ? thirdParty : '')
 
   return (
     <Field
       name="externalProcessResponsible"
       render={({ form }: FieldProps<IDpProcessFormValues>) => (
         <div className="w-full">
           <Select
-            options={codelist.getParsedOptions(EListName.THIRD_PARTY)}
-            onChange={({ value }) => {
-              setValue(value)
-              form.setFieldValue('externalProcessResponsible', value.length > 0 ? value[0].id : '')
-            }}
+            label=""
+            hideLabel
             value={value}
-            placeholder=""
-          />
+            onChange={(event) => {
+              setValue(event.target.value)
+              form.setFieldValue('externalProcessResponsible', event.target.value)
+            }}
+          >
+            <option value="">Velg behandlingsansvarlig</option>
+            {codelist.getParsedOptions(EListName.THIRD_PARTY).map((code) => (
+              <option key={code.id} value={code.id}>
+                {code.label}
+              </option>
+            ))}
+          </Select>
         </div>
       )}
     />

diff --git a/apps/frontend/src/components/common/FieldProduct.tsx b/apps/frontend/src/components/common/FieldProduct.tsx
@@ -1,4 +1,4 @@
-import { Select } from 'baseui/select'
+import { Select } from '@navikt/ds-react'
 import { FieldArray, FieldArrayRenderProps, FormikProps } from 'formik'
 import { IDpProcessFormValues, IProcessFormValues } from '../../constants'
 import { EListName, codelist } from '../../service/Codelist'
@@ -19,18 +19,27 @@ const FieldProduct = (props: TFieldProductsProps) => {
           <div className="w-full">
             <div className="w-full">
               <Select
-                clearable
-                options={codelist
-                  .getParsedOptions(EListName.SYSTEM)
-                  .filter((option) => !formikBag.values.affiliation.products.includes(option.id))}
-                onChange={({ value }) => {
-                  arrayHelpers.form.setFieldValue('affiliation.products', [
-                    ...formikBag.values.affiliation.products,
-                    ...value.map((v) => v.id),
-                  ])
+                label=""
+                hideLabel
+                onChange={(event) => {
+                  if (event.target.value) {
+                    arrayHelpers.form.setFieldValue('affiliation.products', [
+                      ...formikBag.values.affiliation.products,
+                      event.target.value,
+                    ])
+                  }
                 }}
-                overrides={{ Placeholder: { style: { color: 'black' } } }}
-              />
+              >
+                <option value="">Velg system</option>
+                {codelist
+                  .getParsedOptions(EListName.SYSTEM)
+                  .filter((option) => !formikBag.values.affiliation.products.includes(option.id))
+                  .map((code) => (
+                    <option key={code.id} value={code.id}>
+                      {code.label}
+                    </option>
+                  ))}
+              </Select>
             </div>
             <div>
               {renderTagList(