Skip to content

Commit

Permalink
fix: Flush pending DOM updates before .focus() (excalidraw#8901)
Browse files Browse the repository at this point in the history
  • Loading branch information
Mrazator authored Dec 9, 2024
1 parent b5652b8 commit 8a1152c
Showing 1 changed file with 17 additions and 2 deletions.
19 changes: 17 additions & 2 deletions packages/excalidraw/components/ConfirmDialog.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { flushSync } from "react-dom";
import { t } from "../i18n";
import type { DialogProps } from "./Dialog";
import { Dialog } from "./Dialog";
Expand Down Expand Up @@ -43,7 +44,14 @@ const ConfirmDialog = (props: Props) => {
onClick={() => {
setAppState({ openMenu: null });
setIsLibraryMenuOpen(false);
onCancel();
// flush any pending updates synchronously,
// otherwise it could lead to crash in some chromium versions (131.0.6778.86),
// when `.focus` is invoked with container in some intermediate state
// (container seems mounted in DOM, but focus still causes a crash)
flushSync(() => {
onCancel();
});

container?.focus();
}}
/>
Expand All @@ -52,7 +60,14 @@ const ConfirmDialog = (props: Props) => {
onClick={() => {
setAppState({ openMenu: null });
setIsLibraryMenuOpen(false);
onConfirm();
// flush any pending updates synchronously,
// otherwise it leads to crash in some chromium versions (131.0.6778.86),
// when `.focus` is invoked with container in some intermediate state
// (container seems mounted in DOM, but focus still causes a crash)
flushSync(() => {
onConfirm();
});

container?.focus();
}}
actionType="danger"
Expand Down

0 comments on commit 8a1152c

Please sign in to comment.