fix(contentful-apps): Fix chart component manual data key value on pa…

…ge load (#17086)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/contentful-apps/pages/fields/chart-component-source-data-key-field.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import NumberFormat from 'react-number-format'
 import { useDebounce } from 'react-use'
 import { FieldExtensionSDK } from '@contentful/app-sdk'
@@ -84,6 +84,9 @@ const ChartComponentSourceDataKeyField = () => {
     },
   )
   const typeOfSource = manualData ? manualData['typeOfSource'] : null
+  const typeOfManualDataKey = manualData
+    ? manualData['typeOfManualDataKey']
+    : null
   const typeIsPieChart = sdk.entry.fields.type.getValue() === 'pie-cell'
 
   const externalSourceDataKey = manualData
@@ -96,7 +99,7 @@ const ChartComponentSourceDataKeyField = () => {
   const [textInput, setTextInput] = useState(externalSourceDataKey)
 
   const [manualDataKeyValue, setManualDataKeyValue] = useState(
-    typeIsPieChart ? ManualDataKeyValues.Category : ManualDataKeyValues.Date,
+    typeOfManualDataKey ?? ManualDataKeyValues.Date,
   )
 
   const componentKeyValue = sdk.ids.entry
@@ -105,15 +108,27 @@ const ChartComponentSourceDataKeyField = () => {
     sdk.window.startAutoResizer()
   }, [sdk.window])
 
+  const isInitialLoad = useRef(true)
   useEffect(() => {
-    sdk.entry.fields.type.onValueChanged((type) => {
+    const unsubscribe = sdk.entry.fields.type.onValueChanged((type) => {
+      if (isInitialLoad.current) {
+        // Skip the first trigger on page load
+        isInitialLoad.current = false
+        return
+      }
+
       if (type === 'pie-cell') {
         setManualDataKeyValue(ManualDataKeyValues.Category)
       } else {
         setManualDataKeyValue(ManualDataKeyValues.Date)
       }
     })
-  }, [sdk.entry.fields.type])
+
+    // Cleanup listener on unmount
+    return () => {
+      unsubscribe()
+    }
+  }, [sdk.entry.fields.type, setManualDataKeyValue])
 
   useDebounce(
     () => {