Creating jira:customField with UI Kit: Error: CustomFieldEdit throws error unknown component

Forge Forge UI Kit and Custom UI
, ,
1

here is the part of the manifest:

jira:customField:
    - key: item-type-field
      name: Item Type
      description: different types
      type: string
      collection: list # Only valid for string, group, user type
      readOnly: false
      edit:
        render: native
        resource: item-type-edit
        isInLine: true
        experience:
          - issue-create
          - issue-transition
          - issue-view

resources:
  - key: item-type-edit
    path: src/components/itemTypeField/edit.tsx

and here is the actual edit.tsx


function Edit() {
  const [itemType, setItemType] = useState<string[]>([]);

  useEffect(() => {
   view.getContext().then((context) => {
      setItemType((context.extension.fieldValue as string[]).filter(item => allItemTypes.includes(item)));
    })
  },[])

  const handleOnChange = useCallback((selectedList:OptionType[]) => {
    const newList = selectedList.map(item => item.value);
    setItemType(newList);
  },[])

  const handleSave = async () => {
    try {
      await view.submit(itemType);
    } catch (error) {
      console.error("Error submitting value:", error);
    }
  }

  return (
    // <CustomFieldEdit onSubmit={() => console.log('submitting')} hideActionButtons>
      <Select 
      appearance="default" 
      options={options} 
      onChange={(e) =>handleOnChange(e)} 
      isMulti
      isSearchable
      value={createOptionsFromArray(itemType)}
      onBlur={handleSave}
      />
    // </CustomFieldEdit>
  );
}

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

As you can see, I need to comment out as I would be having an error Error: CustomFieldEdit throws error unknown component , and there is no way to edit the custom field. However as I do not have , the field is not edited in-line, instead an edit dialogue box pops up.

Any idea how I can fix the CustomFieldEdit error? Thanks!

2

We’ve observed the same behavior with the CustomFieldEdit component — although in our case, it still works in edit mode.
Our workaround was to create separate components for the view and edit modes, and use conditional rendering to switch between them based on the context.

const context = useProductContext();
const isEditMode = context?.extension?.entryPoint === 'edit';

    return (
        <>
            {isEditMode ?
                <FieldEditMode />
            :   <FieldViewMode />}
        </>
    );