Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add keepMounted option and fix screen glitch #516

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Add keepMounted option and fix screen glitch #516

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bcf60cd
Add keepMounted option
pikaju Feb 14, 2023
c9a1da9
Fix keepMounted being required
pikaju Feb 14, 2023
53d933b
Fix bugs
pikaju Feb 14, 2023
d2c9bb4
Fix modal not being scrollable
pikaju Mar 4, 2023
b0a9d6f
Add example for keepMounted option
pikaju Mar 16, 2023
11fd42a
Improve how modals are centered
pikaju Mar 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
24 changes: 21 additions & 3 deletions react-responsive-modal/src/index.tsx
View file
Open in desktop
Expand Up @@ -158,6 +158,11 @@ export interface ModalProps {
* Callback fired when the Modal has exited and the animation is finished.
*/
onAnimationEnd?: () => void;
/**
* Keeps the Modal mounted even when it is hidden. This is useful for keeping the DOM state
* inside the Modal as well as for SEO purposes.
*/
keepMounted?: boolean;
children?: React.ReactNode;
}

Expand Down Expand Up @@ -187,6 +192,7 @@ export const Modal = React.forwardRef(
onEscKeyDown,
onOverlayClick,
onAnimationEnd,
keepMounted = false,
children,
reserveScrollBarGap,
}: ModalProps,
Expand All @@ -206,6 +212,9 @@ export const Modal = React.forwardRef(
// it will match the server rendered content
const [showPortal, setShowPortal] = useState(false);

// Used to hide the modal when keepMounted is true
const [display, setDisplay] = useState(false);

// Hook used to manage multiple modals opened at the same time
useModalManager(refModal, open);

Expand Down Expand Up @@ -260,10 +269,13 @@ export const Modal = React.forwardRef(
useEffect(() => {
// If the open prop is changing, we need to open the modal
// This is also called on the first render if the open prop is true when the modal is created
if (open && !showPortal) {
if ((open || keepMounted) && !showPortal) {
setShowPortal(true);
handleOpen();
}
if (open && !display) {
setDisplay(true);
}
}, [open]);

const handleClickOverlay = (
Expand Down Expand Up @@ -293,7 +305,10 @@ export const Modal = React.forwardRef(

const handleAnimationEnd = () => {
if (!open) {
setShowPortal(false);
setDisplay(false);
if (!keepMounted) {
setShowPortal(false);
}
}

onAnimationEnd?.();
Expand All @@ -313,7 +328,10 @@ export const Modal = React.forwardRef(
? ReactDom.createPortal(
<div
className={cx(classes.root, classNames?.root)}
style={styles?.root}
style={{
...styles?.root,
...(display ? {} : { display: 'none', pointerEvents: 'none' }),
}}
data-testid="root"
>
<div
Expand Down
10 changes: 10 additions & 0 deletions react-responsive-modal/styles.css
View file
Open in desktop
Expand Up @@ -62,6 +62,7 @@
0% {
opacity: 0;
}

100% {
opacity: 1;
}
Expand All @@ -71,6 +72,7 @@
0% {
opacity: 1;
}

100% {
opacity: 0;
}
Expand All @@ -81,6 +83,7 @@
transform: scale(0.96);
opacity: 0;
}

100% {
transform: scale(100%);
opacity: 1;
Expand All @@ -92,8 +95,15 @@
transform: scale(100%);
opacity: 1;
}

100% {
transform: scale(0.96);
opacity: 0;
}
}

.react-responsive-modal-overlay,
.react-responsive-modal-container,
.react-responsive-modal-modal {
animation-fill-mode: forwards !important;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you please explain why this is needed?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This fixes a separate issue #495. I copied the solution from one of the people in that thread. To be honest, I'm not sure why it helps, but it does.

}
1 change: 1 addition & 0 deletions website/src/docs/index.mdx
View file
Open in desktop
Expand Up @@ -205,6 +205,7 @@ By default, the Modal will be rendered at the end of the html body tag. If you w
| **onEscKeyDown\*** | `(event: KeyboardEvent) => void` | | Callback fired when the escape key is pressed. |
| **onOverlayClick\*** | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | | Callback fired when the overlay is clicked. |
| **onAnimationEnd\*** | `() => void` | | Callback fired when the Modal has exited and the animation is finished. |
| **keepMounted** | `boolean` | false | Keeps the Modal mounted to the DOM tree even when it is hidden. This is useful for keeping DOM state inside the Modal as well as for SEO purposes. |

## License

Expand Down