Is there a way to update defaultValue using an onChange handler?

[JPMagtang]

Overview

Hi there! I've been trying to to implement a roles module with with a set of checkboxes for different role permissions:

Part of its features are the select all/ group checkbox that should trigger check corresponding checkboxes, and should also be triggered checked or unchecked depending on the state of the other checkboxes.

Issue

The tricky part here is I'm using an uncontrolled form, so I'm trying to track the states of the checkboxes using Conform's defaultValue. The problem is that the defaultValue only initializes value upon the initial form loading. I've also tried to update the defaultValue using form.reset() but didn't work as expected.

Am I missing something or is there a better approach for this kind of scenario? Thanks in advance!

interface Action {
    id: number,
    name:string,
    order: number
}

export const RoleSchema = z.object({
    id: z.string().optional(),
    name: z.string({ required_error: "Role name is required." }),
    isRestricted: z.boolean().optional(),
    permissions: z.array(
        z.object({
            moduleId: z.number(),
            actions: z.string().array(),
        })
    )
})

var defaultData = {
        id: null,
        name: "",
        isRestricted: false,
        permissions: modules.map((module: Module) => {
            return {
                moduleId: module.id,
                actions: [],
            };
        }),
    };

  let [ dataState, setDataState ] = useState(defaultData);

  function handleChange() {
      setDataState(
          {
              id: null,
              name: "",
              isRestricted: false,
              permissions: modules.map((module: Module) => {
                  return {
                      moduleId: module.id,
                      actions: [],
                  };
              }),
          }
      )
      formRef.current?.reset();
  }
  
  const [form, fields] = useForm({
      id: "new-role-form",
      constraint: getZodConstraint(RoleSchema),
      lastResult: actionData as SubmissionResult,
      onValidate({ formData }) {
          return parseWithZod(formData, {schema: RoleSchema})
      },
      shouldValidate: "onBlur",
      shouldRevalidate: "onSubmit",
      defaultValue: defaultData,
  })
    
// rest of the code...

***Edit note:

• added role schema for reference

[Pouet--]

Hello,

I also used a checkbox with select/unselect all, with the idea of iterating over every checkbox and setting the current value via form.update :

const toggleSelectAll = (check: boolean) => {
  permissions.getFieldList().forEach((permission) => {
    const { active } = permission.getFieldset();
    form.update({ name: active.name, value: check });
  });
};

Maybe with your schema you will have to extract { actions } from permissions, and then get another fieldList and fieldSet iteration ? But I think you get the idea.

BUT ! I do not know if this triggers a re-render every time you update the form, maybe it is a bad idea with a large set of inputs ? Let me know what you think.

Regarding the checked or unchecked default value, I think of a solution being every time you trigger a checkbox inside your form, call a function which will iterate over every input and look inside input.value to see if every input has the same boolean value, and if so, set the select/unselect checkbox to the corresponding one.

[JPMagtang]

Thanks for the input @Pouet-- ,
I also have the similar idea in mind, but probably as a last resort for now. First, because it can be tedious to manage. And like you said, I also don't think it's the best approach for this especially when the application scales up. It would also be counter meta (is this a word?) on what react/remix is made for, you know, a more declarative approach to programming.

I previously have a similar module but is implemented as a controlled form, and I've had issues with it so I'm trying to explore and make do with uncontrolled forms and my current stack Remix with Zod, Conform. Only if there's a way that defaultValues can be updated for every change then it'll be easier to track the states.

[edmundhung]

You can decide whether the select all checkbox should be checked based the value of the form / fields through form.value / fields.permissions.value etc. To update multiple checkbox at once, you can consider using form.update() at the permissions level instead of individual checkbox, e.g.

// This makes sure conform subscribe to the permission value
// So you won't have an outdated value inside toggleSelectAll (More info on #467)
const permissions = fields.permission.value;

function toggleSelectAll() {
  form.update({
    name: fields.permissions.name,
    value: {
      ...permissions,
      // ... all the changes you wanna made
    },
  });
}

[JPMagtang]

The actual implementation hasn't been as straightforward as I thought it would be, but form.update has been helpful. Thanks!