Handling Field interdependencies within AtlasKit Forms

Atlassian Ecosystem Design
1

Hello,

I’m trying to handle the visibility of an Atlaskit Form field based on the value of another (see code below).

I tried handling state myself by using an onChange on the RadioGroup to retrieve its value but this just broke the Form's data collection.

Strangely, I can’t find any examples of this kind of behaviour online.

Any ideas?

Thanks!

<Form onSubmit={onSubmit}>
    {({ formProps }) => (
        <form {...formProps}>
            <Field name={'type'}>
                {({ fieldProps }) => (
                    <RadioGroup
                        defaultValue={'show'}
                        options={[
                            { name: 'type', value: 'show', label: 'Show select' },
                            { name: 'type', value: 'hide', label: 'Hide select' },
                        ]}
                        {...fieldProps}
                    />
                )}
            </Field>
            <Field
                name={'application'}
                label={'Select something'}
            >
                {({ fieldProps }) => (
                    <Select
                        className="single-select"
                        classNamePrefix="react-select"
                        options={things.map(a => ({ value: a.id, label: a.name }))}
                        placeholder="Choose a Something"
                        {...fieldProps}
                    />
                )}
            </Field>
        </form>
    )}
</Form>
1 Like
2

After a bit of digging in the source code, I’m using this approach:

<Field name={'type'}>
    {({ fieldProps }) => {
        const {onChange, ...restFieldProps} = fieldProps
        return (
            <RadioGroup
                defaultValue={'show'}
                options={[
                    { name: 'type', value: 'show', label: 'Show select' },
                    { name: 'type', value: 'hide', label: 'Hide select' },
                ]}
                onChange={(e) => {
                    setType(e.target.value)
                    onChange(e)
                }}
                {...fieldProps}
            />
        )
    )}
</Field>

…and then handle visibility of the other field myself using the ‘type’ state I set.

Seems pretty clumsy though. Surely there’s a better way?

Thanks

1 Like
3

Hi :wave:
Thanks for reaching out, the approach you found likely the most effective. There isn’t anything built into @atlaskit/form for fields to communicate directly like you desire. Listening to change events and then updating state based off that is the best option.

1 Like
4

That’s the way I’m using, and I think this is the best way. I can’t found any other way to make this work in Atlaskit Form.

1 Like