I wrote a simple jira plugin which adds links to revision numbers in a custom field, however when I enter edit mode, it clears the field even if there was a previous value in it. Code looks like this: import React, { useState, useEffect } from 'react';import ForgeReconciler, {Text, Link} from "@forge/react";import { view } from '@forge/bridge'; const View = () => {const [fieldValue, setFieldValue] = useState(""); useEffect(() => {view.getContext().then((context) => { setFieldValue(context.extension.fieldValue) });}, []);console.log(fieldValue); if (fieldValue == null)return (<> No value ); const baseURL = 'https://foo.bar/project';const numbers = fieldValue?.split(' ');let links = [];numbers.forEach ((element, index) => {links.push ( {element} );if (index != numbers.length - 1)links.push (' ');});return (<> {links} ); }; ForgeReconciler.render( ); Edit.jsx code: import React, { useState, useCallback } from "react";import ForgeReconciler, { Textfield } from "@forge/react";import { CustomFieldEdit } from "@forge/react/jira";import { view } from "@forge/bridge"; const Edit = () => {const [value, setValue] = useState("");const onSubmit = useCallback(() => {view.submit(value);}, [view, value]); return ( {setValue(e.target.value);}}/> );}; ForgeReconciler.render( ); I tried using context values and get them with the same useEffect function that is used in the frontend code, nodejs crashes no matter what I tried. Is this even possible to implement with the current forge version?

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Can you add the previous value into a custom field in edit mode?

Ádám Smiló

I wrote a simple jira plugin which adds links to revision numbers in a custom field, however when I enter edit mode, it clears the field even if there was a previous value in it.

Code looks like this:

import React, { useState, useEffect } from 'react';

import ForgeReconciler, {

Text, Link

} from "@forge/react";

import { view } from '@forge/bridge';

const View = () => {

const [fieldValue, setFieldValue] = useState("");

useEffect(() => {

view.getContext().then((context) => { setFieldValue(context.extension.fieldValue) });

}, []);

console.log(fieldValue);

if (fieldValue == null)

return (

<Text>No value</Text>

</>

);

const baseURL = 'https://foo.bar/project';

const numbers = fieldValue?.split(' ');

let links = [];

numbers.forEach ((element, index) => {

links.push (<Link href={baseURL + element} openNewTab={true}>{element}</Link>);

if (index != numbers.length - 1)

links.push (' ');

});

return (

<Text>{links}</Text>

</>

);

};

ForgeReconciler.render(

<React.StrictMode>

</React.StrictMode>

);

Edit.jsx code:

import React, { useState, useCallback } from "react";

import ForgeReconciler, { Textfield } from "@forge/react";

import { CustomFieldEdit } from "@forge/react/jira";

import { view } from "@forge/bridge";

const Edit = () => {

const [value, setValue] = useState("");

const onSubmit = useCallback(() => {

view.submit(value);

}, [view, value]);

return (

<Textfield

onChange={(e) => {

setValue(e.target.value);

}}

</CustomFieldEdit>

);

};

ForgeReconciler.render(

<React.StrictMode>

</React.StrictMode>

);

I tried using context values and get them with the same useEffect function that is used in the frontend code, nodejs crashes no matter what I tried. Is this even possible to implement with the current forge version?

Accepted answers

Tuncay Senturk _Snapbytes_

Hi @Ádám Smiló

You are not initializing the field with its current value, so it shows an empty field when editing and submits an empty string unless the user manually re-enters it.

In Edit.jsx, you're not using view.getContext() to load the current field value. As a result, the field resets to "" in edit mode and clears the value on submit.

It should be something like the below.

import React, { useState, useEffect, useCallback } from "react";
import ForgeReconciler, { Textfield } from "@forge/react";
import { CustomFieldEdit } from "@forge/react/jira";
import { view } from "@forge/bridge";

const Edit = () => {
const [value, setValue] = useState("");

// Load the current field value when the edit view is opened
useEffect(() => {
view.getContext().then((context) => {
if (context.extension.fieldValue != null) {
setValue(context.extension.fieldValue);
}
});
}, []);

const onSubmit = useCallback(() => {
view.submit(value);
}, [value]);

return (
<CustomFieldEdit onSubmit={onSubmit}>
<Textfield
value={value}
onChange={(e) => {
setValue(e.target.value);
}}
/>
</CustomFieldEdit>
);
};

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

All comments

Tuncay Senturk _Snapbytes_

Hi @Ádám Smiló

You are not initializing the field with its current value, so it shows an empty field when editing and submits an empty string unless the user manually re-enters it.

In Edit.jsx, you're not using view.getContext() to load the current field value. As a result, the field resets to "" in edit mode and clears the value on submit.

It should be something like the below.

import React, { useState, useEffect, useCallback } from "react";
import ForgeReconciler, { Textfield } from "@forge/react";
import { CustomFieldEdit } from "@forge/react/jira";
import { view } from "@forge/bridge";

const Edit = () => {
const [value, setValue] = useState("");

// Load the current field value when the edit view is opened
useEffect(() => {
view.getContext().then((context) => {
if (context.extension.fieldValue != null) {
setValue(context.extension.fieldValue);
}
});
}, []);

const onSubmit = useCallback(() => {
view.submit(value);
}, [value]);

return (
<CustomFieldEdit onSubmit={onSubmit}>
<Textfield
value={value}
onChange={(e) => {
setValue(e.target.value);
}}
/>
</CustomFieldEdit>
);
};

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

Ádám Smiló

I added this hook to the code, it gets the context and correctly, I tested it with console.log commands, but it can't set the value for some reason. Do you know how can I debug this?

Tuncay Senturk _Snapbytes_

Tracking the logs is how you debug your code.

You need to add logs to identify where the problem lies and fix it accordingly.

Ádám Smiló

I added these console logs to the code:

useEffect(() => {

view.getContext().then((context) => {

console.log(context.extension.fieldValue);

if (context.extension.fieldValue != "") {

setValue(context.extension.fieldValue);

console.log("Set value ran");

}

});

}, []);

And I can see the value, as well as the confirmation log message that the set value ran. However it still does not put the field value into the textbox.
Képernyőfotó 2025-06-10 - 15.07.43.png

Képernyőfotó 2025-06-10 - 15.07.43.png

Tuncay Senturk _Snapbytes_

Hmm, I'm not sure but it is worth trying to only render when value is defined.

Could you try the below updated code?

import React, { useState, useEffect, useCallback } from "react";
import ForgeReconciler, { Textfield } from "@forge/react";
import { CustomFieldEdit } from "@forge/react/jira";
import { view } from "@forge/bridge";

const Edit = () => {
const [value, setValue] = useState(undefined); // Start as undefined

useEffect(() => {
  view.getContext().then((context) => {
    console.log(context.extension.fieldValue);
    const existingValue = context.extension.fieldValue || "";
    setValue(existingValue);
    console.log("Set value ran");
  });
}, []);

const onSubmit = useCallback(() => {
  view.submit(value || "");
}, [value]);

return (
  <CustomFieldEdit onSubmit={onSubmit}>
  {value !== undefined && (
    <Textfield
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  )}
</CustomFieldEdit>
);
};

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

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

jira

cloud

jira-cloud