'How do I control the behaviour of my checkbox?

I'm looping through an array of vehicleTypes and show a dropdown of checkboxes. I'm using FormControlLabel and <Checkbox/> as the control. The problem is when I select a checkbox, it closes my drop down (i'm using <Collapse in={openModule} timeout="auto" unmountOnExit> for this.

I don't know why this is happening and it's sort of screwing up the flow of the form. I also need to tell it that when All Vehicles is selected, make all of the others blacked out

Image and code attached:

The Code

<TableCell
                                    colSpan={4}
                                    className={styles.vehicleTypeTableCell
                                    }>
                                    <Collapse in={openModule} timeout="auto" unmountOnExit>
                                      <Table>
                                        <TableBody>
                                          {vehicleTypes.map((selection) => (
                                            <TableRow>
                                              <TableCell
                                                className={styles.vehicleTypeList}
                                                colSpan={2}
                                              >
                                                <FormControlLabel
                                                  style={{ padding: 0, margin: 0 }}
                                                  control={<Checkbox 
                                                  />}
                                                  label={selection}
                                                  name="names"
                                                  value={selection}
                                                  onChange={(event) => {
                                                    if (selection === 'All Vehicles') {
                                                      setSelectionDisabled(!selectionDisabled);
                                                    }
                                                    handleChange(event);
                                                  }}
                                                  disabled={
                                                    selection !== 'All Vehicles'
                                                      ? selectionDisabled
                                                      : false
                                                  }
                                                />
                                              </TableCell>
                                            </TableRow>
                                          ))}
                                        </TableBody>
                                      </Table>
                                    </Collapse>
                                  </TableCell>

Does anyone know how to stop this from happening?

Video of Behavior

Gif of the behavior

Handle Change is changing the formik value. So, what it's doing is it's targeting names in the list below... and it's updating the value to the radio button (created by looping through the array) that is selected

  const initialValues = {
    brandId,
    languageCode,
    reservationType,
    purchaseDate: '',
    firstName: '',
    lastName: '',
    zipCode: '',
    email: '',
    confirmEmail: '',
    city: '',
    ownershipType: '',
    offerType: '',
    names: [],
    vehiclesOfInterest: [],
  };

Solution 1:^[1]

https://mui.com/api/form-control-label/

You are missing checked property for FormControlLabel to make your selection persist

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Piyush Rana

'How do I control the behaviour of my checkbox?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]