How do I get Mantine Modals to work with form states

Question

I have a component like this, built with Mantine UI, Nextjs 14, Mantine Forms and the Mantine Forms library.

I tried using the useState to manage form states but whenever I change the role and click outside the select component, the role changes back to the initial value, which is the undesired behaviour.

// All Imports here

const AddMember = ({ id }: { id: string }) => {
 
  const form = useForm<{ email: string; role: Role }>({
    initialValues: {
      role: "Admin",
    },
  });

  async function submitForm(values: { email: string; role: Role }) {
   ...
  }

  const ModalForm = () => {
    return (
      <form
        className="space-y-3"
        onSubmit={form.onSubmit((values) => submitForm(values))}
      >
      
        <Select
          label="Role"
          placeholder="Select the member's role"
          {...form.getInputProps("role")}
          data={[
            { value: "Admin", label: "Admin" },
            { value: "Employee", label: "Employee" },
            { value: "Manager", label: "Manager" },
          ]}
        />

        <Button
          fullWidth
          type="submit"
          onClick={() => {
            //Submit form here
           }
          mt="md"
        >
          Submit
        </Button>
      </form>
    );
  };

  return (
    <Button
      onClick={() => {
        modals.open({
          title: "Add new organisation member",
          children: <ModalForm />,
        });
      }}
    >
      Add Member
    </Button>
  );
};

export default AddMember;

The problem is, whenever I change the role on the Select input, and then I click outside of the input, the form state goes back to the initial role on the form...

Answer 1

Quoting from Mantine documentation:

Dynamic Content and the modals manager:

Note that when using the Modals manager, dynamic content is not supported. Once modal is opened, a snapshot is saved into internal state and cannot be updated.

If you intend to have dynamic content in modals, either:

Use internal component state, or Use the modal component instead of modals manager

So, to get it working, You can keep a state for Modal hidden/open, and then using the Modal manager, you can display the information. Then the form will appropriately reflect the state changes.

Answer 2

From version 7.15.0 you can update modals.

Modals manager now supports modals.updateModal and modals.updateContextModal function to update modal after it was opened:

import { Button } from '@mantine/core';
import { modals } from '@mantine/modals';

function Demo() {
  return (
    <Button
      onClick={() => {
        const modalId = modals.open({
          title: 'Initial Modal Title',
          children: <Text>This text will update in 2 seconds.</Text>,
        });

        setTimeout(() => {
          modals.updateModal({
            modalId,
            title: 'Updated Modal Title',
            children: (
              <Text size="sm" c="dimmed">
                This is the updated content of the modal.
              </Text>
            ),
          });
        }, 2000);
      }}
    >
      Open updating modal
    </Button>
  );
}