diff --git a/apps/client/src/widgets/dialogs/branch_prefix.tsx b/apps/client/src/widgets/dialogs/branch_prefix.tsx
index e4b7d3e59..fb3b24294 100644
--- a/apps/client/src/widgets/dialogs/branch_prefix.tsx
+++ b/apps/client/src/widgets/dialogs/branch_prefix.tsx
@@ -1,6 +1,6 @@
 import { useRef, useState } from "preact/hooks";
 import appContext from "../../components/app_context.js";
-import { closeActiveDialog, openDialog } from "../../services/dialog.js";
+import { closeActiveDialog } from "../../services/dialog.js";
 import { t } from "../../services/i18n.js";
 import server from "../../services/server.js";
 import toast from "../../services/toast.js";
@@ -8,56 +8,18 @@ import Modal from "../react/Modal.jsx";
 import ReactBasicWidget from "../react/ReactBasicWidget.js";
 import froca from "../../services/froca.js";
 import tree from "../../services/tree.js";
-import FBranch from "../../entities/fbranch.js";
 import Button from "../react/Button.jsx";
 import FormGroup from "../react/FormGroup.js";
+import useTriliumEvent from "../react/hooks.jsx";
+import FBranch from "../../entities/fbranch.js";
 
-interface BranchPrefixDialogProps {
-    branch?: FBranch;
-}
-
-function BranchPrefixDialogComponent({ branch }: BranchPrefixDialogProps) {
+function BranchPrefixDialogComponent() {
+    const [ shown, setShown ] = useState(false);
+    const [ branch, setBranch ] = useState<FBranch>();
     const [ prefix, setPrefix ] = useState(branch?.prefix ?? "");
     const branchInput = useRef<HTMLInputElement>(null);
 
-    async function onSubmit() {
-        if (!branch) {
-            return;
-        }
-
-        savePrefix(branch.branchId, prefix);
-        closeActiveDialog();
-    }
-
-    return (
-        <Modal
-            className="branch-prefix-dialog"
-            title={t("branch_prefix.edit_branch_prefix")}
-            size="lg"
-            onShown={() => branchInput.current?.focus()}
-            onSubmit={onSubmit}
-            helpPageId="TBwsyfadTA18"
-            footer={<Button text={t("branch_prefix.save")} />}
-        >
-            <FormGroup label={t("branch_prefix.prefix")}>
-                <div class="input-group">
-                    <input class="branch-prefix-input form-control" value={prefix} ref={branchInput}
-                        onChange={(e) => setPrefix((e.target as HTMLInputElement).value)} />
-                    <div class="branch-prefix-note-title input-group-text"> - {branch && branch.getNoteFromCache().title}</div>
-                </div>
-            </FormGroup>
-        </Modal>
-    );
-}
-
-export default class BranchPrefixDialog extends ReactBasicWidget {
-    private branch?: FBranch;
-
-    get component() {
-        return <BranchPrefixDialogComponent branch={this.branch} />;
-    }
-
-    async editBranchPrefixEvent() {
+    useTriliumEvent("editBranchPrefix", async () => {
         const notePath = appContext.tabManager.getActiveContextNotePath();
         if (!notePath) {
             return;
@@ -78,11 +40,46 @@ export default class BranchPrefixDialog extends ReactBasicWidget {
             return;
         }
 
-        this.branch = froca.getBranch(newBranchId);
+        setBranch(froca.getBranch(newBranchId));
+        setShown(true);
+    });
 
-        // Re-render the component with the new notePath
-        this.doRender();
-        openDialog(this.$widget);
+    async function onSubmit() {
+        if (!branch) {
+            return;
+        }
+
+        savePrefix(branch.branchId, prefix);
+        closeActiveDialog();
+    }
+
+    return (
+        <Modal
+            className="branch-prefix-dialog"
+            title={t("branch_prefix.edit_branch_prefix")}
+            size="lg"
+            onShown={() => branchInput.current?.focus()}
+            onHidden={() => setShown(false)}
+            onSubmit={onSubmit}
+            helpPageId="TBwsyfadTA18"
+            footer={<Button text={t("branch_prefix.save")} />}
+            show={shown}
+        >
+            <FormGroup label={t("branch_prefix.prefix")}>
+                <div class="input-group">
+                    <input class="branch-prefix-input form-control" value={prefix} ref={branchInput}
+                        onChange={(e) => setPrefix((e.target as HTMLInputElement).value)} />
+                    <div class="branch-prefix-note-title input-group-text"> - {branch && branch.getNoteFromCache().title}</div>
+                </div>
+            </FormGroup>
+        </Modal>
+    );
+}
+
+export default class BranchPrefixDialog extends ReactBasicWidget {
+
+    get component() {
+        return <BranchPrefixDialogComponent />;
     }
 
 }
diff --git a/apps/client/src/widgets/react/Modal.tsx b/apps/client/src/widgets/react/Modal.tsx
index 96f41076f..4be25849e 100644
--- a/apps/client/src/widgets/react/Modal.tsx
+++ b/apps/client/src/widgets/react/Modal.tsx
@@ -1,7 +1,9 @@
-import { useEffect, useRef } from "preact/hooks";
+import { useContext, useEffect, useRef } from "preact/hooks";
 import { t } from "../../services/i18n";
 import { ComponentChildren } from "preact";
 import type { CSSProperties, RefObject } from "preact/compat";
+import { openDialog } from "../../services/dialog";
+import { ParentComponent } from "./ReactBasicWidget";
 
 interface ModalProps {
     className: string;
@@ -45,11 +47,13 @@ interface ModalProps {
      */
     formRef?: RefObject<HTMLFormElement>;
     bodyStyle?: CSSProperties;
+    show?: boolean;
 }
 
-export default function Modal({ children, className, size, title, header, footer, footerStyle, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden: onHidden, modalRef: _modalRef, formRef: _formRef, bodyStyle }: ModalProps) {
+export default function Modal({ children, className, size, title, header, footer, footerStyle, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden: onHidden, modalRef: _modalRef, formRef: _formRef, bodyStyle, show }: ModalProps) {
     const modalRef = _modalRef ?? useRef<HTMLDivElement>(null);
     const formRef = _formRef ?? useRef<HTMLFormElement>(null);
+    const parentWidget = useContext(ParentComponent);
 
     if (onShown || onHidden) {
         useEffect(() => {
@@ -74,6 +78,12 @@ export default function Modal({ children, className, size, title, header, footer
         }, [ ]);
     }    
 
+    useEffect(() => {
+        if (show && parentWidget) {
+            openDialog(parentWidget.$widget);
+        }
+    }, [ show ]);
+
     const dialogStyle: CSSProperties = {};
     if (zIndex) {
         dialogStyle.zIndex = zIndex;