Tab inside group with conditional refer to select is not changing the data of the field

[henrytrianta]

Bug Report

Tab inside group with conditional that is refer with a selection of value tab is not changing the field correctly inside the tab.

Expected Behavior

The expected behaviour is, when you change the tab into another tab, the field text with data is keep

Current Behavior

Current behaviour is the value inside text field is persist even we switched the tab

Possible Solution

Steps to Reproduce

1. Create invitation collection
2. Copy attached code
3. yarn dev

import { CollectionConfig } from "payload/types";
import ListInvitation from "../components/Invitations/ListInvitation";
import { isAdmin, isAdminOrCreatedBy } from "../utils/accessRole";

const Invitation: CollectionConfig = {
  slug: "invitations",
  admin: {
    useAsTitle: "slug",
    description: "This is where you create your invitation, atm, the system only accept one invitation per-user :)",
    components: {
      views: {
        List: ListInvitation,
      },
    },
  },
  access: {
    read: isAdminOrCreatedBy,
    create: async (ctx) => {
      if (isAdmin(ctx)) return true;

      // check in db how many invitation is already created by the user
      const invitation = await ctx.req.payload.find({
        collection: "invitations",
        where: {
          createdBy: {
            equals: ctx.req.user.id,
          },
        },
      });
      // make sure only one invitation are able to be created by the user
      if (invitation.totalDocs === 0) return true;

      return false;
    },
    update: isAdminOrCreatedBy,
    delete: isAdminOrCreatedBy,
  },
  fields: [
    {
      label: "URL Invitation",
      name: "slug",
      type: "text",
      required: true,
      unique: true,
      // need to add localized to have a unique properties in mongo
      localized: false,
      admin: {
        position: "sidebar",
      },
    },
    {
      label: "Invitation Type",
      type: "select",
      name: "type",
      options: [
        {
          label: "Wedding",
          value: "wedding",
        },
        {
          label: "Metatah",
          value: "metatah",
        },
      ],
    },
    {
      label: "Wedding",
      type: "group",
      name: "wedding",
      admin: {
        description: "Please fill all the details for your next wedding invitation",
        condition: (data) => {
          if (data.type === "wedding") {
            return true;
          }
          return false;
        },
      },
      fields: [
        {
          label: "Identity Details",
          type: "tabs",
          tabs: [
            // Cowok
            {
              label: "Groom Details",
              description: "Here is the detail for the Groom (Male)",
              fields: [
                {
                  label: "Groom Name",
                  type: "row",
                  fields: [
                    {
                      label: "Full Name (Groom)",
                      name: "groom-name",
                      type: "text",
                      admin: {
                        width: "80%",
                      },
                    },
                    {
                      label: "Birth Order (Groom)",
                      name: "groom-birthorder",
                      type: "number",
                      admin: {
                        width: "20%",
                      },
                    },
                  ],
                },
                {
                  label: "Parent Name (Groom)",
                  type: "row",
                  fields: [
                    {
                      label: "Mother Name (Groom)",
                      name: "groom-mother",
                      type: "text",
                    },
                    {
                      label: "Father Name (Groom)",
                      name: "groom-father",
                      type: "text",
                    },
                  ],
                },
              ],
            },
            // Cewek
            {
              label: "Bride Details",
              description: "Here is the detail for the Bride (Female)",
              fields: [
                {
                  label: "Bride Name",
                  type: "row",
                  fields: [
                    {
                      label: "Full Name (Bride)",
                      name: "bride-name",
                      type: "text",
                      admin: {
                        width: "80%",
                      },
                    },
                    {
                      label: "Birth Order (Bride)",
                      name: "bride-birthorder",
                      type: "number",
                      admin: {
                        width: "20%",
                      },
                    },
                  ],
                },
                {
                  label: "Parent Name (Bride)",
                  type: "row",
                  fields: [
                    {
                      label: "Mother Name (Bride)",
                      name: "bride-mother",
                      type: "text",
                    },
                    {
                      label: "Father Name (Bride)",
                      name: "bride-father",
                      type: "text",
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          label: "Wedding Location",
          name: "wedding-location",
          type: "point",
        },
      ],
    },
    {
      name: "createdBy",
      type: "relationship",
      relationTo: "users",
      access: {
        update: () => false,
      },
      admin: {
        // TODO: this need to be hide whenever the development phase end
        hidden: true,
        readOnly: true,
        position: "sidebar",
        condition: (data) => Boolean(data?.createdBy),
      },
    },
  ],
  hooks: {
    beforeChange: [
      ({ req, operation, data }) => {
        if (operation === "create" || operation === "update") {
          if (req.user) {
            data.createdBy = req.user.id;
            return data;
          }
        }
      },
    ],
  },
};

export default Invitation;

Detailed Description

Payload version: 1.0.19
Browser: Chrome
Database: MongoDB Atlas

[Nike682631]

@henrytrianta is this issue available to work on?

[DanRibbens]

@henrytrianta is this issue available to work on?

As far as I know, none of the maintainers have started this one.

[jmikrut]

Hey @henrytrianta — this is now fixed and will be released in an upcoming patch version shortly!