Carbon Multi Select Not Resetting Correctly With Form Reset #1412

[GilbertCherrie]

Possible bug found with the carbon multi select component and the form reset functionality. I am running into an issue where resetting a form correctly returns all fields to initial values except the mutli select field. It seems to be receiving the correct values after clicking reset (the initial selected values) but the component seems to not react to this change visually as it still holds whatever check boxes were checked before hitting the reset button.

[Hyperkid123]

@GilbertCherrie can you provide the form schema, please?

[GilbertCherrie]

Form schema:

    {
      component: componentTypes.TEXT_FIELD,
      label: __('Full Name'),
      maxLength: 50,
      id: 'name',
      name: 'name',
      isDisabled: disabled,
      isRequired: true,
      validate: [{
        type: validatorTypes.REQUIRED,
        message: __('Required'),
      }],
    },
    {
      component: componentTypes.TEXT_FIELD,
      label: __('Username'),
      maxLength: 255,
      id: 'userid',
      name: 'userid',
      isDisabled: disabled,
      isRequired: true,
      validate: [{
        type: validatorTypes.REQUIRED,
        message: __('Required'),
      }],
    },
    ...(id ? [
      ...(editMode ? [
        {
          component: 'edit-password-field',
          label: __('Password'),
          id: 'password',
          name: 'password',
          maxLength: 50,
          editMode,
          disabled: !editMode,
          setEditMode: () => {
            setState((state) => ({
              ...state,
              editMode: !editMode,
            }));
          },
          placeholder: '●●●●●●●●',
          buttonLabel: editMode ? __('Cancel') : __('Change'),
        },
        {
          component: componentTypes.TEXT_FIELD,
          label: __('Confirm Password'),
          maxLength: 50,
          type: 'password',
          id: 'confirmPassword',
          name: 'confirmPassword',
          initialValue: '',
          isRequired: true,
        },
      ] : [
        {
          component: 'edit-password-field',
          label: __('Password'),
          maxLength: 50,
          id: 'passwordPlaceholder',
          name: 'passwordPlaceholder',
          editMode,
          disabled: true,
          setEditMode: () => {
            setState((state) => ({
              ...state,
              editMode: !editMode,
            }));
          },
          placeholder: '●●●●●●●●',
          buttonLabel: editMode ? __('Cancel') : __('Change'),
        },
      ]),
    ] : [
      {
        component: componentTypes.TEXT_FIELD,
        label: __('Password'),
        maxLength: 50,
        type: 'password',
        id: 'password',
        name: 'password',
        isRequired: true,
        validate: [{
          type: validatorTypes.REQUIRED,
          message: __('Required'),
        }],
      },
      {
        component: componentTypes.TEXT_FIELD,
        label: __('Confirm Password'),
        maxLength: 50,
        type: 'password',
        id: 'confirmPassword',
        name: 'confirmPassword',
        initialValue: '',
        isRequired: true,
        validate: [{
          type: validatorTypes.REQUIRED,
          message: __('Required'),
        }],
      },
    ]),
    {
      component: componentTypes.TEXT_FIELD,
      label: __('E-mail Address'),
      maxLength: 255,
      id: 'email',
      name: 'email',
      validate: [{
        type: validatorTypes.PATTERN,
        pattern: '[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$',
        message: __('Email must be a valid email address'),
      }],
    },
    {
      component: componentTypes.SELECT,
      label: __('Available Groups'),
      id: 'groups',
      name: 'groups',
      isDisabled: disabled,
      isMulti: true,
      isRequired: true,
      placeholder: __('<Choose one or more Groups>'),
      options: availableGroups,
      validate: [{
        type: validatorTypes.REQUIRED,
        message: __('Required'),
      }],
      onChange: (values) => {
        const groups = [];
        values.forEach((group) => {
          if (group.label) {
            groups.push(group.label);
          } else {
            availableGroups.forEach((availableGroup) => {
              if (availableGroup.value === group) {
                groups.push(availableGroup.label);
              }
            });
          }
        });
        setState((state) => ({
          ...state,
          selectedGroups: groups,
        }));
      },
    },

[GilbertCherrie]

Some of the components in the schema have some custom functionality but I noticed this same issue with other simpler forms that use this component as well so I don't think the custom functionality should be an issue. I also noticed this issue before any of the onChange code was added to the component.