diff --git a/src/components/Dashboard/common/ObjectSelect.jsx b/src/components/Dashboard/common/ObjectSelect.jsx index d0e981e..a996507 100644 --- a/src/components/Dashboard/common/ObjectSelect.jsx +++ b/src/components/Dashboard/common/ObjectSelect.jsx @@ -47,11 +47,23 @@ const ObjectSelect = ({ const [objectList, setObjectList] = useState([]) const [treeSelectValue, setTreeSelectValue] = useState(null) const [initialLoading, setInitialLoading] = useState(true) + const valueRef = useRef(null) // Refs to track value changes const prevValueRef = useRef(value) const isInternalChangeRef = useRef(false) + // Normalize a value to an identity string so we can detect in-place _id updates + const getValueIdentity = useCallback((val) => { + if (val && typeof val === 'object') { + if (val._id) return String(val._id) + if (val.value && typeof val.value === 'object' && val.value._id) + return String(val.value._id) + } + return JSON.stringify(val) + }, []) + const prevValueIdentityRef = useRef(getValueIdentity(value)) + // Utility function to check if object only contains _id const isMinimalObject = useCallback((obj) => { if (!obj || typeof obj !== 'object' || Array.isArray(obj)) { @@ -162,7 +174,6 @@ const ObjectSelect = ({ const buildTreeData = useCallback( (data, pIdx = 0, parentKeys = [], filterPath = []) => { if (!data || !Array.isArray(data)) return [] - console.log(data, pIdx, properties.length) // If we are past the grouping properties, these are leaf objects if (pIdx >= properties.length) { return data.map((object) => { @@ -180,6 +191,7 @@ const ObjectSelect = ({ objectType={type} objectData={object} isEditing={false} + style={{ top: '-0.5px' }} /> ), @@ -342,12 +354,14 @@ const ObjectSelect = ({ value && typeof value === 'object' && value !== null && - !initialized && + valueRef.current !== value && type != 'unknown' ) { + console.log('fetching full object', value) + valueRef.current = value // Check if value is a minimal object and fetch full object if needed const fullValue = await fetchFullObjectIfNeeded(value) - + console.log('fullValue', fullValue) // Build a new filter from value's properties that are in the properties list const valueFilter = { ...filter } properties.forEach((prop) => { @@ -370,7 +384,8 @@ const ObjectSelect = ({ }) // Fetch with the new filter handleFetchObjectsProperties(valueFilter) - setTreeSelectValue(fullValue._id) + console.log('setting treeSelectValue', valueRef.current._id) + setTreeSelectValue(valueRef.current._id) setInitialized(true) return } @@ -410,6 +425,10 @@ const ObjectSelect = ({ const prevValuesRef = useRef({ type, masterFilter }) + useEffect(() => { + console.log('treeSelectValue', treeSelectValue) + }, [treeSelectValue]) + useEffect(() => { const prevValues = prevValuesRef.current @@ -433,8 +452,9 @@ const ObjectSelect = ({ useEffect(() => { // Check if value has actually changed + const currentValueIdentity = getValueIdentity(value) const hasValueChanged = - JSON.stringify(prevValueRef.current) !== JSON.stringify(value) + prevValueIdentityRef.current !== currentValueIdentity if (hasValueChanged) { const changeSource = isInternalChangeRef.current ? 'internal' : 'external' @@ -451,8 +471,9 @@ const ObjectSelect = ({ // Update the previous value reference prevValueRef.current = value + prevValueIdentityRef.current = currentValueIdentity } - }, [value]) + }, [value, getValueIdentity]) const placeholder = useMemo( () =>