Atlaskit chebox problem

Hi I have a simple form:

import React, {ChangeEvent, Fragment, useCallback, useEffect, useState} from 'react';

import Button from '@atlaskit/button/standard-button';
import {Checkbox} from '@atlaskit/checkbox';
import {Grid, GridColumn} from '@atlaskit/page';

import Form, {CheckboxField, Field, FormFooter} from '@atlaskit/form';
import {ValueType as Value} from "@atlaskit/select/types";
import Select from "@atlaskit/select";
import {sentinelVulnerabilities} from "../constants";
import {invoke} from "@forge/bridge";

interface Option {
    label: string;
    value: string;
}

BasicConfiguration.defaultProps = {
    jiraIssuePriorities: [],
}

const columns = 12;
export default function BasicConfiguration({jiraIssuePriorities, initPriorites, allowedVulnerabilities}: any) {


    const [allowedVul, setAllowedVul] = useState<any | null>(undefined);

    const [isCheckedCritical, setIsCheckedCritical] = useState<boolean>(false);
    const [isCheckedHigh, setIsCheckedHigh] = useState<boolean>(false);
    const [isCheckedMedium, setIsCheckedMedium] = useState<boolean>(false);
    const [isCheckedLow, setIsCheckedLow] = useState<boolean>(false);
    const [isCheckedNote, setIsCheckedNote] = useState<boolean>(false);


    useEffect(() => {
        (async () => {
            await invoke("getStorage", {name: 'vulnerabilities_allowed'}).then((data: any) => {
                setIsCheckedCritical(data.includes('critical'));
                setIsCheckedHigh(data.includes('high'));
                setIsCheckedMedium(data.includes('medium'));
                setIsCheckedLow(data.includes('low'));
                setIsCheckedNote(data.includes('note'));
            });
        })();
    }, [])

    const jiraIssuePrioritiesOptions = jiraIssuePriorities.map(({name, id}: any) => ({
        label: name,
        value: id,
    }));

    const shouldBySelected = (prioritySentinel: string) => {
        if (initPriorites === undefined || Object.keys(prioritySentinel).length === 0.)
            return '';

        return initPriorites[prioritySentinel];
    }

    const onSubmit = async (data: any) => {

        console.log(data);
        console.log(isCheckedCritical);
        //Store mapping
        await invoke("setStorage", {name: "vulnerabilities_allowed", data: data.vulnerabilities});

        let priorities = {
            note: undefined,
            critical: undefined,
            high: undefined,
            medium: undefined,
            low: undefined
        };
        if (data.hasOwnProperty('critical')) {
            priorities.critical = data.critical.label;
        }

        if (data.hasOwnProperty('high')) {
            priorities.high = data.high.label;
        }

        if (data.hasOwnProperty('medium')) {
            priorities.medium = data.medium.label;
        }

        if (data.hasOwnProperty('low')) {
            priorities.low = data.low.label;
        }

        if (data.hasOwnProperty('note')) {
            priorities.note = data.note.label;
        }

        await invoke("setStorage", {name: 'vuln_priorities', data: priorities});
    }

    const onChangeCritical = useCallback((event: any) => {
        setIsCheckedCritical((current: boolean) => !current)
        
    },[]);

    const onChangeHigh = useCallback((event: any) => {
        setIsCheckedHigh((current: boolean) => !current)
    }, []);

    const onChangeMedium = useCallback((event: any) => {
        setIsCheckedMedium((current: boolean) => !current)
    }, []);

    const onChangeLow = useCallback((event: any) => {
        setIsCheckedLow((current: boolean) => !current)
    }, []);

    const onChangeNote = useCallback((event: any) => {
        setIsCheckedNote((current: boolean) => !current)
    }, []);


    return (
        <div style={{
            display: 'flex',
            width: '600px',
            margin: '0 auto',
            flexDirection: 'column',
            paddingTop: 50,
        }}>

            <h3>Map Sentinel Vulnerabilities and Jira Issues</h3>
            <Form onSubmit={onSubmit}>
                {({formProps}) => (
                    <form {...formProps}>

                        <div>

                            <Grid spacing="compact" columns={columns}>


                                <GridColumn medium={4} css={{paddingTop: '5px'}}>
                                    <CheckboxField name="vulnerabilities" value={'critical'}
                                    >
                                        {({fieldProps}) => <Checkbox {...fieldProps} label={'Critical'}
                                                                     isChecked={isCheckedCritical}
                                                                     onClick={onChangeCritical}
                                        />}
                                    </CheckboxField>


                                </GridColumn>
                                <GridColumn medium={8}>
                                    <Field<Value<Option>>
                                        name={'critical'}
                                        isRequired={true}
                                        defaultValue={{
                                            value: shouldBySelected('critical'),
                                            label: shouldBySelected('critical')
                                        }}

                                    >
                                        {({fieldProps: {id, ...rest}, error}) => (
                                            <Fragment>
                                                <Select
                                                    inputId={id}
                                                    {...rest}
                                                    options={jiraIssuePrioritiesOptions}


                                                />

                                            </Fragment>
                                        )}
                                    </Field>
                                </GridColumn>

                                <GridColumn medium={4} css={{paddingTop: '5px'}}>
                                    <CheckboxField name="vulnerabilities" value={'high'}
                                    >
                                        {({fieldProps}) => <Checkbox {...fieldProps} label={'High'}
                                                                     isChecked={isCheckedHigh} onClick={onChangeHigh}
                                        />}
                                    </CheckboxField>


                                </GridColumn>
                                <GridColumn medium={8}>
                                    <Field<Value<Option>>
                                        name={'high'}
                                        isRequired={true}
                                        defaultValue={{
                                            value: shouldBySelected('high'),
                                            label: shouldBySelected('high')
                                        }}

                                    >
                                        {({fieldProps: {id, ...rest}, error}) => (
                                            <Fragment>
                                                <Select
                                                    inputId={id}
                                                    {...rest}
                                                    options={jiraIssuePrioritiesOptions}


                                                />

                                            </Fragment>
                                        )}
                                    </Field>
                                </GridColumn>

                                <GridColumn medium={4} css={{paddingTop: '5px'}}>
                                    <CheckboxField name="vulnerabilities" value={'medium'}
                                    >
                                        {({fieldProps}) => <Checkbox {...fieldProps} label={'Medium'}
                                                                     isChecked={isCheckedMedium}
                                                                     onClick={onChangeMedium}
                                        />}
                                    </CheckboxField>


                                </GridColumn>
                                <GridColumn medium={8}>
                                    <Field<Value<Option>>
                                        name={'medium'}
                                        isRequired={true}
                                        defaultValue={{
                                            value: shouldBySelected('medium'),
                                            label: shouldBySelected('medium')
                                        }}

                                    >
                                        {({fieldProps: {id, ...rest}, error}) => (
                                            <Fragment>
                                                <Select
                                                    inputId={id}
                                                    {...rest}
                                                    options={jiraIssuePrioritiesOptions}


                                                />

                                            </Fragment>
                                        )}
                                    </Field>
                                </GridColumn>


                                <GridColumn medium={4} css={{paddingTop: '5px'}}>
                                    <CheckboxField name="vulnerabilities" value={'low'}
                                    >
                                        {({fieldProps}) => <Checkbox {...fieldProps} label={'Low'}
                                                                     isChecked={isCheckedLow} onClick={onChangeLow}
                                        />}
                                    </CheckboxField>


                                </GridColumn>
                                <GridColumn medium={8}>
                                    <Field<Value<Option>>
                                        name={'low'}
                                        isRequired={true}
                                        defaultValue={{
                                            value: shouldBySelected('low'),
                                            label: shouldBySelected('low')
                                        }}

                                    >
                                        {({fieldProps: {id, ...rest}, error}) => (
                                            <Fragment>
                                                <Select
                                                    inputId={id}
                                                    {...rest}
                                                    options={jiraIssuePrioritiesOptions}


                                                />

                                            </Fragment>
                                        )}
                                    </Field>
                                </GridColumn>


                                <GridColumn medium={4} css={{paddingTop: '5px'}}>
                                    <CheckboxField name="vulnerabilities" value={'note'}
                                    >
                                        {({fieldProps}) => <Checkbox {...fieldProps} label={'Note'}
                                                                     isChecked={isCheckedNote} onClick={onChangeNote}
                                        />}
                                    </CheckboxField>


                                </GridColumn>
                                <GridColumn medium={8}>
                                    <Field<Value<Option>>
                                        name={'note'}
                                        isRequired={true}
                                        defaultValue={{
                                            value: shouldBySelected('note'),
                                            label: shouldBySelected('note')
                                        }}

                                    >
                                        {({fieldProps: {id, ...rest}, error}) => (
                                            <Fragment>
                                                <Select
                                                    inputId={id}
                                                    {...rest}
                                                    options={jiraIssuePrioritiesOptions}


                                                />

                                            </Fragment>
                                        )}
                                    </Field>
                                </GridColumn>
                            </Grid>
                        </div>


                        <FormFooter>
                            <Button type="submit" appearance="primary">
                                Submit
                            </Button>
                        </FormFooter>
                    </form>
                )}
            </Form>
        </div>
    );
}

But the checkboxes are behaving not correct. If checkbox is checked and I submit form, ‘vulnerabilities’ are always empty. I need to uncheck the box and than check it again and when submit form that I get some value. Any idea why its happening?

Hi @janambroz, can you try to use different names for your checkboxes. I think it may have some kind of unexpected behaviour like in pure HTML:

<html>
<body>
<form action="javascript:void(0);" onsubmit="onSubmit(event)">
  <input name="vuln" type="checkbox" />
  <input name="vuln" type="checkbox" />
  <input type="submit" />
</form>

<script>
  function onSubmit(event) {
    const formData = new FormData(event.target);
    console.log(Object.fromEntries(formData));
  }
</script>
</body>
</html>