Is there any Onchange event for Select Options

Forge
,
1

Is there a way to invoke the change event of a form select option? (something similar to react onChange)

My requirement is that when I change the project from the select option of projects it should invoke a rest API call to get list of Items.
I am developing App for Azure Devops and Jira Integration.So I am listing all the project from Azure Devops in one dropdown .Based on the project selection ,i will call Azure devops API to get Work Item.This list will be listed in another dropdown.

So I want to use Onchange Even

Capture1
Capture1900×540 48.4 KB

t for dropdowns.But onchange event is not working

Kindly help me on this team.

2

Unfortunately, FormCondition is the closest thing we have at the moment but it might not be dynamic enough for your use case.

We’re currently running a closed EAP for a client-side version of UI Kit which would include onChange handlers for all the Form components but it won’t be ready for production use until next quarter at the earliest.

For the moment, your best option is probably to use Custom UI.

2 Likes
3

Thanks for the response.

Since i have more dependent fields for my app.

Is it possible import react ui /external ui components.
i have tried but it not working.

4

No, you can’t import components sorry. Again, this is something we’re working on with the new EAP (Trello) but is not currently possible.

5

I’m trying to do the same. I get all the board Names and based on that I’m making an API call to get sprints in that board and populate my second dropdown. Is this functionality now developed?

6

@AdamMoore the form select option/onchange in forge still in development phase or already rolled out? im also facing the same issue.

7

Yes, the latest version of the Select component has a wide range of props and events you can hook into https://developer.atlassian.com/platform/forge/ui-kit/components/select/#props

2 Likes
8

Hey @AdamMoore, I am trying to read the value from the onChange prop in Select but I am not getting anything in console.
I also tried with onInputChange but still no luck.
Can you help?

                 <Select
                    appearance="default"
                    inputId="AiModelList"
                    placeholder="AI Models"
                    options={aiModelData}
                    styles={customStyles}
                    defaultValue={[{ label: 'Open AI', value: 'openai' }]}
                    onInputChange={(event) => { console.log('Select event: ', event) }}
                    onChange={(event) => { console.log('event: ', event) }}
                    {...register("aiModelName", { required: true })}
                />
9

Here’s what I did to solve it:

<Select
    options={options}
    {...(() => {
        const baseProps = register(selectName, { required: true })
        const {onChange: prevOnChange, ...restProps } = baseProps
        return {
            ...restProps,
            onChange: (v) => {
                prevOnChange(v)
                additionalOnChangeFunc(v)
            }
        }
    })()}
/>

*@taher the reason why onChange didn’t work for you is that register returned its own onChange function and overwrote yours.

1 Like