Skip to content

Fix race condition when unmounting modal while opening it #963

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

Closed
wants to merge 2 commits into from
Closed

Fix race condition when unmounting modal while opening it #963

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
694c0e6
Fix race condition when closing modal while opening it
elliottkember May 28, 2022
3fd38f2
use onAnimate to handle the animations
elliottkember May 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 27 additions & 2 deletions src/components/bottomSheetModal/BottomSheetModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ const BottomSheetModalComponent = forwardRef<

// callbacks
onChange: _providedOnChange,
onAnimate: _providedOnAnimate,

// components
children: Content,
Expand All @@ -73,6 +74,7 @@ const BottomSheetModalComponent = forwardRef<
const bottomSheetRef = useRef<BottomSheet>(null);
const currentIndexRef = useRef(!animateOnMount ? index : -1);
const restoreIndexRef = useRef(-1);
const animatingRef = useRef(!animateOnMount);
const minimized = useRef(false);
const forcedDismissed = useRef(false);
const mounted = useRef(false);
Expand Down Expand Up @@ -200,7 +202,11 @@ const BottomSheetModalComponent = forwardRef<
/**
* if modal is already been dismiss, we exit the method.
*/
if (currentIndexRef.current === -1 && minimized.current === false) {
if (
currentIndexRef.current === -1 &&
minimized.current === false &&
!animatingRef.current
) {
return;
}

Expand Down Expand Up @@ -276,7 +282,11 @@ const BottomSheetModalComponent = forwardRef<
/**
* if modal is already been dismiss, we exit the method.
*/
if (currentIndexRef.current === -1 && minimized.current === false) {
if (
currentIndexRef.current === -1 &&
minimized.current === false &&
!animatingRef.current
) {
return;
}

Expand All @@ -300,6 +310,19 @@ const BottomSheetModalComponent = forwardRef<
}
},
[]);
const handleBottomSheetOnAnimate = useCallback(
function handleBottomSheetOnAnimate(
_fromIndex: number,
_toIndex: number,
) {
animatingRef.current = true;

if (_providedOnAnimate) {
_providedOnAnimate(_fromIndex, _toIndex);
}
},
[_providedOnAnimate]
);
const handleBottomSheetOnChange = useCallback(
function handleBottomSheetOnChange(_index: number) {
print({
Expand All @@ -311,6 +334,7 @@ const BottomSheetModalComponent = forwardRef<
},
});
currentIndexRef.current = _index;
animatingRef.current = false;

if (_providedOnChange) {
_providedOnChange(_index);
Expand Down Expand Up @@ -381,6 +405,7 @@ const BottomSheetModalComponent = forwardRef<
containerOffset={containerOffset}
onChange={handleBottomSheetOnChange}
onClose={handleBottomSheetOnClose}
onAnimate={handleBottomSheetOnAnimate}
children={
typeof Content === 'function' ? <Content data={data} /> : Content
}
Expand Down