Internally use React <Activity> for state preservation in Modals, Popovers, etc.

[christian-leingang]

I propose changing the internal implementation of these components to leverage the new <Activity> component from React.

Instead of conditionally rendering the children (which causes unmounting), Mantine could internally wrap the children of Modal, Popover, Dialog, etc., in an <Activity> component. The mode of this component would be toggled based on the opened prop.

A simplified conceptual implementation for the Modal component might look like this:

// Simplified internal logic of the Modal component

import { Activity } from 'react';
import { Paper, Portal } from '@mantine/core';

function InternalModal({ children, opened, ...otherProps }) {
  // ... a lot of existing modal logic ...

  return (
    <Portal {...portalProps}>
      <div {...wrapperProps}>
        <Paper {...paperProps}>
          {/* 👇 PROPOSED CHANGE HERE 👇 */}
          <Activity mode={opened ? 'visible' : 'hidden'}>
            {children}
          </Activity>
        </Paper>
      </div>
    </Portal>
  );
}

This would hide the content via display: "none" instead of unmounting it, thereby preserving its entire React state and the corresponding DOM state (like input values or scroll positions).

Benefits of this approach

1. Improved User Experience: The state of components within a Modal or Popover would be preserved across open/close cycles out-of-the-box. This is a huge UX win for forms and complex interactive content.
2. Simplified Developer Experience: Developers would no longer need to manage the state of modal content outside the modal itself just to prevent it from being lost.
3. Performance: Using <Activity> allows for pre-rendering. Content can be rendered in a hidden state (mode='hidden') and be ready to display instantly, which can make the UI feel more responsive.
4. Future-Proofing: This aligns Mantine's implementation with modern React features designed specifically for these kinds of UI challenges.

Potential for an Opt-Out

This behavior could be introduced as the new default. Alternatively, to avoid breaking changes or for cases where resetting the state is desired, it could be controlled via a new prop, for example keepMounted or preserveState.

<Modal opened={opened} onClose={close} keepMounted>
  {/* This content's state will now be preserved */}
</Modal>

This would provide maximum flexibility.

I believe this internal change would be a powerful enhancement for Mantine and would solve a common pain point for many developers. What are your thoughts on this?

[BrendanC23]

+1 I'm currently using Mantine's tab component and it would be great to have <Activity /> built in. This would be a big improvement over keepMounted={false}, which doesn't preserve component state.

https://mantine.dev/core/tabs/#unmount-inactive-tabs