Atlaskit Select compnent onChange problem

Jira Development Jira Cloud
1

I use Atlaskit to develop a jira plugin. But the onChange function does not work as planned. Can someone help me? Below is the part of example code.

const AdminPage = () => {
    function closeDialog() {
    }

    function submit(data) {
        return undefined;
    }

    return (
        <div>

            <ModalTransition>
                    <ModalDialog onClose={closeDialog}>
                        <Form onSubmit={(data) => submit(data)}>
                            {({formProps}) => (
                                <form id='form-id' {...formProps}>
                                    <ModalBody>
                                        <Field name="select-field-test" label="Select Field Test">
                                            {({fieldProps: {id, ...rest}}) => (
                                                <Fragment>
                                                    <Select
                                                        className="single-select"
                                                        classNamePrefix="react-select"
                                                        placeholder="Please select a value"
                                                        onChange={() => console.log("val" )}
                                                        options={[
                                                            { label: "A", value: "a" },
                                                            { label: "B", value: "b" },
                                                            { label: "C", value: "c" }
                                                        ]}
                                                        {...rest}
                                                    />
                                                </Fragment>
                                            )}
                                        </Field>
                                    </ModalBody>
                                </form>
                            )}
                        </Form>
                    </ModalDialog>
                )}
            </ModalTransition>
        </div>
    );
}

export default AdminPage;
2

Please downgrade the version of styled-components to 3.2. The Atlassian document: Atlaskit by Atlassian

3

The version of styled-components in my project is 5.3.3, it’s higher than 3.2. I changed the version to 3.2, still does not work. So I don’t think it’s the problem.

4

The version of styled-components is a real problem, and you solved it.

Now as I see in your code, the props spread {...rest} comes after the onChange={() => console.log("val")}, it means your onChange has been overridden, please move the {...rest} to the first place, before any other props.

<Select
    {...rest}
    className="single-select"
    classNamePrefix="react-select"
    placeholder="Please select a value"
    onChange={() => console.log("val" )}
    options={[
      { label: "A", value: "a" },
      { label: "B", value: "b" },
      { label: "C", value: "c" }
    ]}
/>
5

I changed the code as you told me , the problem is solved.
Thanks a lot.

6

I changed the code as you told me， but another problem occurs. When I select a value, the onChange() is triggered, but the value I select can’t be shown in the select box. It just triggered the onChange() function, but the value is not selected. :sweat_smile:

7

You need to really understand the way an Atlaskit Form works (take a look at the documentation https://atlassian.design/components/form/examples)

In that case, you can either remove your own onChange, and let the Field control your change:

<Select
    {...rest}
    className="single-select"
    classNamePrefix="react-select"
    placeholder="Please select a value"
    options={[
      { label: "A", value: "a" },
      { label: "B", value: "b" },
      { label: "C", value: "c" }
    ]}
/>

Or you need to explicitly call the Field’s onChange in your onChange like below:

<Field name="select-field-test" label="Select Field Test">
  {({fieldProps: {id, onChange, ...rest}}) => (
      <Fragment>
        <Select
            {...rest}
            className="single-select"
            classNamePrefix="react-select"
            placeholder="Please select a value"
            onChange={(value) => {
              console.log("val");
              onChange(value); // Explicit call here
            }}
            options={[
              {label: "A", value: "a"},
              {label: "B", value: "b"},
              {label: "C", value: "c"}
            ]}
        />
      </Fragment>
  )}
</Field>

Or you can take full control on the Select’s value by passing the value prop to your Select component.

2 Likes
8

Thanks for your patience. I’m a beginner on Forge Custom UI programming. There is a lot to learn.

1 Like
9

Of course, if you see me answer helped, could you please mark it as Solution, so other people can easily look for the answer?