CustomFieldEdit throws error unknown component

Hello,
I have a problem while using CustomFieldEdit. My code like this:

import { LICENSE_INVALID, MULTI } from "../../constants/constants";
import { getAttachments, isLicenseActive } from "../../helpers";
import React, { useEffect, useState } from "react";
import ForgeReconciler, {
    Text,
    useProductContext,
    Select
} from "@forge/react";
import { view, invoke } from "@forge/bridge";
import { CustomFieldEdit } from "@forge/react/jira";

const EditAttachmentLabels = () => {
    // Define all state variables at the top level
    const [fieldValue, setFieldValue] = useState(null);
    const [fieldType, setFieldType] = useState(null);
    const [issueId, setIssueId] = useState(null);
    const [values, setValues] = useState(null);
    const [attachments, setAttachments] = useState(null);

    const context = useProductContext();

    useEffect(() => {
        if (context) {
            setFieldType(context.extension.fieldType);
            setFieldValue(context.extension.fieldValue);
            setIssueId(context.extension.issue.id);
        }
    }, [context]);

    useEffect(() => {
        if (issueId) {
            invoke("getAttachments", { issueId }).then(resp => {
                setAttachments(resp);
            });
        }
    }, [issueId]);

    if (context === undefined) {
        return <Text>Loading...</Text>;
    }

    const hasLicense = isLicenseActive(context);
    return (
        <CustomFieldEdit onSubmit={() => view.submit(values)}>
            {!hasLicense ? (
                <Text>{LICENSE_INVALID}</Text>
            ) : attachments === null ? (
                <Text>Loading attachments...</Text>
            ) : attachments.hasError ? (
                <Text>Error: {attachments.error}</Text>
            ) : (
                <Select
                    isClearable={true}
                    name="selected"
                    isMulti={fieldType?.includes(MULTI)}
                    label="Attachments"
                    onChange={(e) => setValues(e.target.value)}
                >
                    {attachments.payload.map((attachment) => (
                        <Option
                            key={attachment.id}
                            defaultSelected={
                                !fieldType?.includes(MULTI)
                                    ? attachment.filename === fieldValue
                                    : (fieldValue || []).includes(attachment.filename)
                            }
                            value={attachment.filename}
                        />
                    ))}
                </Select>
            )}
        </CustomFieldEdit>
    );
};

ForgeReconciler.render(
    <React.StrictMode>
        <EditAttachmentLabels />
    </React.StrictMode>
);

But i got error on console like this:


How can i fix this?

1 Like

From https://developer.atlassian.com/platform/forge/ui-kit/jira-components/custom-field-edit/

A CustomFieldEdit is a wrapper component that provides inline edit features for Forge custom fields in edit mode for apps with isInline property defined in app’s manifest. The wrapper replicates the behavior of all other Jira fields.

Maybe isInline in the manifest is missing?

I think the component is not named well. It should be CustomFieldInlineEdit or something. For edit dialogs/forms, the you can use the Form compoment. No need for CustomFieldEdit.

Edit: Looks like your don’t want inline edit. So using Form is probably what you want.

1 Like