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

Follow up to my previous answer.

I thought CustomFieldEdit was for inline stuff, but that may not be true.

In my own custom field I currently have the following:

  • edit section like described in the docu of the jira.customField manifest entry.
    edit:
       resource: some-resource
       render: native
    
    where the resource is
    resources:
        - key: some-resource
          path: src/jira/frontend/edit-field.tsx
    
  • src/jira/frontend/edit-field.tsx
    In this file I render the edit dialog like this:
    // ... Imports
    export function Edit() {
      // ... Setup
    
      return (
        <Form onSubmit={handleSubmit(submit)}>
          <FormSection>
            <Text>asdf</Text>
          </FormSection>
          <FormFooter>
            <Stack grow='fill'>
              <ButtonGroup>
                <Button onClick={async () => await view.close()}>Close</Button>
                <Button type='submit' appearance='primary' isDisabled={!editAllowed}>Submit</Button>
              </ButtonGroup>
            </Stack>
          </FormFooter>
        </Form>
      );
    }
    
    ForgeReconciler.render(<Edit />);
    
    

This however seems to use a deprecated functionality. (See https://developer.atlassian.com/platform/forge/changelog/#CHANGE-2536 and https://developer.atlassian.com/platform/forge/changelog/#CHANGE-2023)

Reading the changelog, it’s not clear, that this is the functionality they are talking about.
I only realized it when a Red message showed up on our installations.

Now how do you migrate to the new version of doing this???
Absolutely no idea.

From the Documentation:

If you still want to use modal experience in your fields, use the Modal component for UI Kit fields and the Modal bridge API for Custom UI fields.

(See https://developer.atlassian.com/platform/forge/manifest-reference/modules/jira-custom-field/#issue-view)

I did wrap my component in an explicit Modal and set isInline to true, but that just resulted in a flashing pop-up with the red depreciation message followed by the Modal dialog covering it. Seems like that does not resolve it.

Then I tried to use <CustomFieldEdit> wrapping a Modal dialog, which resulted in “Error rendering app - encountered unknown component CustomFieldEdit”. (I made sure all forge dependencies were updated first.)
See also: Error rendering app - encountered unknown component CustomFieldEdit

TLDR:

  • Edit for jira.customField is confusing and the depreciation notice about it is not clear about what is being deprecated.
  • CustomFieldEdit seems to be broken.

Since this topic is already resolved, I think I will create a new one.