fix: Selected Values Not Saved or Reset to Default in SelectList Component

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.0.30
+
+- updated the default value logic of SelectList component to handle onChange function
+
 ## 3.0.29
 
 - updated status tag color and also updated theme and chip with 'deleted' property

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catena-x/portal-shared-components",
-  "version": "3.0.29",
+  "version": "3.0.30",
   "description": "Catena-X Portal Shared Components",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",

src/components/basic/SelectList/index.tsx

@@ -26,7 +26,7 @@ import { SelectInput } from '../MultiSelectList/Components/SelectInput'
 import { SelectOptions } from '../MultiSelectList/Components/SelectOptions'
 import uniqueId from 'lodash/uniqueId'
 import isEqual from 'lodash/isEqual'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 interface SelectListProps extends Omit<TextFieldProps, 'variant'> {
   // eslint-disable-next-line
@@ -66,6 +66,19 @@ export const SelectList = ({
   // Add an ESLint exception until there is a solution
   // eslint-disable-next-line
   const [selected, setSelected] = useState<any>(defaultValue || {})
+
+  useEffect(() => {
+    setSelected(defaultValue)
+  }, [defaultValue])
+
+  // eslint-disable-next-line
+  const handleChange = (newValue: any) => {
+    if (newValue.target.value) {
+      setSelected(newValue)
+      onChangeItem(newValue)
+    }
+  }
+
   return (
     <Autocomplete
       className="cx-select-list"
@@ -81,10 +94,8 @@ export const SelectList = ({
       options={items.map((item: any) => item)}
       // eslint-disable-next-line
       getOptionLabel={(option) => option[keyTitle] || ''}
-      onChange={(_, reason) => {
-        setSelected(reason)
-
-        onChangeItem(reason)
+      onChange={(_event, _nextValue) => {
+        handleChange(_nextValue)
       }}
       isOptionEqualToValue={(option, value) => isEqual(option, value)}
       renderOption={(props, option, { inputValue }) => (