fix: pr feedback

src/data-workspace/custom-form/replace-input-node.js

@@ -29,7 +29,7 @@ export const replaceInputNode = (domNode, metadata) => {
     // TODO: This was already there when I started on this branch
     // Need to check with Kai what his intentions were with it.
     // const cellProps = getCellPropsByInputType(inputType)
-    // console.log(domNode)
+
     if (inputType !== INPUT_TYPES.ENTRYFIELD) {
         return undefined
     }

src/data-workspace/inputs/generic-input.js

@@ -57,6 +57,13 @@ export const GenericInput = ({
 }) => {
     const [value, setValue] = useState(initialValue)
     const [lastSyncedValue, setLastSyncedValue] = useState(initialValue)
+    const [syncTouched, setSyncTouched] = useState(false)
+
+    useEffect(() => {
+        if (syncTouched) {
+            setValueSynced(value === lastSyncedValue)
+        }
+    }, [value, lastSyncedValue, syncTouched])
 
     const limits = useMinMaxLimits(deId, cocId)
 
@@ -75,14 +82,14 @@ export const GenericInput = ({
     const { mutate } = useSetDataValueMutation({ deId, cocId })
 
     const syncData = (newValue) => {
+        setSyncTouched(true)
         // todo: Here's where an error state could be set: ('onError')
         mutate(
             // Empty values need an empty string
             { value: newValue || '' },
             {
                 onSuccess: () => {
                     setLastSyncedValue(newValue)
-                    setValueSynced(value === newValue)
                 },
             }
         )

src/data-workspace/inputs/long-text.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useSetDataValueMutation } from '../../shared/index.js'
 import styles from './inputs.module.css'
 import { InputPropTypes } from './utils.js'
@@ -16,17 +16,24 @@ export const LongText = ({
 }) => {
     const [value, setValue] = useState(initialValue)
     const [lastSyncedValue, setLastSyncedValue] = useState(initialValue)
+    const [syncTouched, setSyncTouched] = useState(false)
+
+    useEffect(() => {
+        if (syncTouched) {
+            setValueSynced(value === lastSyncedValue)
+        }
+    }, [value, lastSyncedValue, syncTouched])
 
     const { mutate } = useSetDataValueMutation({ deId, cocId })
     const syncData = (newValue) => {
+        setSyncTouched(true)
         // todo: Here's where an error state could be set: ('onError')
         mutate(
             // Empty values need an empty string
             { value: newValue || '' },
             {
                 onSuccess: () => {
                     setLastSyncedValue(newValue)
-                    setValueSynced(value === newValue)
                 },
             }
         )

src/data-workspace/inputs/true-only-checkbox.js

@@ -1,5 +1,5 @@
 import { Checkbox } from '@dhis2/ui'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useSetDataValueMutation } from '../../shared/index.js'
 import styles from './inputs.module.css'
 import { convertBooleanValue, InputPropTypes } from './utils.js'
@@ -19,17 +19,24 @@ export const TrueOnlyCheckbox = ({
     const [lastSyncedValue, setLastSyncedValue] = useState(() =>
         convertBooleanValue(initialValue)
     )
+    const [syncTouched, setSyncTouched] = useState(false)
+
+    useEffect(() => {
+        if (syncTouched) {
+            setValueSynced(value === lastSyncedValue)
+        }
+    }, [value, lastSyncedValue, syncTouched])
 
     const { mutate } = useSetDataValueMutation({ deId, cocId })
     const syncData = (newValue) => {
+        setSyncTouched(true)
         // todo: Here's where an error state could be set: ('onError')
         mutate(
             // Empty values need an empty string
             { value: newValue || '' },
             {
                 onSuccess: () => {
                     setLastSyncedValue(newValue)
-                    setValueSynced(newValue === value)
                 },
             }
         )

src/shared/use-blurred-field.js

@@ -1,12 +1,13 @@
 import { useRef } from 'react'
+import { getFieldId } from '../data-workspace/get-field-id.js'
 import { useHighlightedFieldStore } from './stores/highlighted-field-store.js'
 
 export const useBlurredField = () => {
     const previouslyActiveFieldRef = useRef(undefined)
 
     const { dataElementId, categoryOptionComboId } =
         useHighlightedFieldStore((state) => state.getHighlightedField()) || {}
-    const fieldId = `${dataElementId}.${categoryOptionComboId}`
+    const fieldId = getFieldId(dataElementId, categoryOptionComboId)
 
     const blurredField = previouslyActiveFieldRef.current
     previouslyActiveFieldRef.current = fieldId