Forge select onchange is not working

Forge
,
1

Hi Team,
I need selected dropdown value before onsubmission of form.but its not working.I put normal console.log .but its not logged in my tunnel screen.i have pasted out my code here.what is the solution to solve this?

 const handleTimeSpanChange = (time) => {
    console.log("time:: ",time);
    setSelectedTimeSpan(time);
  };
 <Select style={{ width: '50px' }} label="Select Time Duration" name="timeSpan" defaultValue={issueFormData.timeBoundry}
           onChange={handleTimeSpanChange}>
            <Option label="Minutes" value="Minutes" />
            <Option label="Hours" value="Hours" />
        </Select>
2

What’s the context you’re using the Select in? I know the onChange method doesn’t work in Confluence macro configs, for example. It just fails silently.

3

I am using forge/ui select box .

4

Then what is the approach you suggest to use for select in forge app .instead of using third party libraries

5

Hi @Dhurgeswari , it looks like you’re using UI Kit 1 if you’re importing from @forge/ui. The Select component doesn’t have an onChange handler in this version of UI Kit. We recommend upgrading over to the latest version of UI Kit which imports components from @forge/react. This is an upgrade guide for updating your app from UI Kit 1 to latest UI Kit https://developer.atlassian.com/platform/forge/ui-kit/upgrade-to-ui-kit-latest/ .

And here are the docs for the Select component in the latest UI Kit which contains the onChange handler: https://developer.atlassian.com/platform/forge/ui-kit/components/select/

1 Like
6

okay @QuocLieu thanks for your suggestion.i will do

7

hi @QuocLieu
i am using @react/select i am facing this issue in my app

image
image1334Ă—625 40.6 KB

8

The correct package to import Select from is @forge/react. Could I see a code snippet?

9

sure @QuocLieu .I am using jira create->show all->jira-adminpage-ui-kit template

image
image995Ă—362 7.92 KB

const issueFields = [
{ label: “Summary”, value: “summary” },
{ label: “Project”, value: “project” },
{ label: “issuetype”, value: “issuetype” },
{ label: “status”, value: “status” },
{ label: “priority”, value: “priority” },
];

10

Why is this not documented anywhere?

Edit: ok so it’s documented in one section but not on the component docs themselves.

11

It’s not in the individual components, but it’s now in the macro module reference.