diff --git a/client/admin/users/CustomFieldsForm.js b/client/admin/users/CustomFieldsForm.js index 1df7d88f5ca..0c3d64a6ac6 100644 --- a/client/admin/users/CustomFieldsForm.js +++ b/client/admin/users/CustomFieldsForm.js @@ -1,4 +1,4 @@ -import React, { useMemo, useEffect } from 'react'; +import React, { useMemo, useEffect, useState } from 'react'; import { TextInput, Select, Field, Divider, Box } from '@rocket.chat/fuselage'; import { useSetting } from '../../contexts/SettingsContext'; @@ -59,17 +59,27 @@ export default function CustomFieldsForm({ customFieldsData, setCustomFieldsData const customFieldsJson = useSetting('Accounts_CustomFields'); // TODO: add deps. Left this way so that a possible change in the setting can't crash the page (useForm generates states automatically) - const customFields = useMemo(() => JSON.parse(customFieldsJson || '{}'), []); + const [customFields] = useState(() => { + try { + JSON.parse(customFieldsJson || '{}'); + } catch { + return {}; + } + }); + + const hasCustomFields = Boolean(Object.values(customFields).length); const defaultFields = useMemo(() => Object.entries(customFields).reduce((data, [key, value]) => { data[key] = value.defaultValue ?? ''; return data; }, {}), []); const { values, handlers } = useForm({ ...defaultFields, ...customFieldsData }); useEffect(() => { - setCustomFieldsData(values); + if (hasCustomFields) { + setCustomFieldsData(values); + } // TODO: remove stringify. Is needed to avoid infinite rendering }, [JSON.stringify(values)]); - if (!Object.values(customFields).length) { + if (!hasCustomFields) { return null; }