fix(react/dialogs): some dialogs are not displayed on top

This commit is contained in:
Elian Doran 2025-08-10 17:37:48 +03:00
parent 3caefa5409
commit a20d66a6b5
No known key found for this signature in database
5 changed files with 10 additions and 2 deletions

View File

@ -54,6 +54,7 @@ function ConfirmDialogComponent() {
}} /> }} />
</>} </>}
show={shown} show={shown}
stackable
> >
{!opts?.message || typeof opts?.message === "string" {!opts?.message || typeof opts?.message === "string"
? <div>{(opts?.message as string) ?? ""}</div> ? <div>{(opts?.message as string) ?? ""}</div>

View File

@ -32,6 +32,7 @@ function ShowInfoDialogComponent() {
onClick={() => setShown(false)} onClick={() => setShown(false)}
/>} />}
show={shown} show={shown}
stackable
> >
<RawHtmlBlock className="info-dialog-content" html={opts?.message ?? ""} /> <RawHtmlBlock className="info-dialog-content" html={opts?.message ?? ""} />
</Modal>); </Modal>);

View File

@ -81,6 +81,7 @@ function NoteTypeChooserDialogComponent() {
setShown(false); setShown(false);
}} }}
show={shown} show={shown}
stackable
> >
<FormGroup label={t("note_type_chooser.change_path_prompt")}> <FormGroup label={t("note_type_chooser.change_path_prompt")}>
<NoteAutocomplete <NoteAutocomplete

View File

@ -69,6 +69,7 @@ function PromptDialogComponent() {
}} }}
footer={<Button text={t("prompt.ok")} keyboardShortcut="Enter" primary />} footer={<Button text={t("prompt.ok")} keyboardShortcut="Enter" primary />}
show={shown} show={shown}
stackable
> >
<FormGroup label={opts?.message} labelRef={labelRef}> <FormGroup label={opts?.message} labelRef={labelRef}>
<FormTextBox <FormTextBox

View File

@ -58,9 +58,13 @@ interface ModalProps {
* This method must generally be coupled with `onHidden` in order to detect when the modal was closed externally (e.g. by the user clicking on the backdrop or on the close button). * This method must generally be coupled with `onHidden` in order to detect when the modal was closed externally (e.g. by the user clicking on the backdrop or on the close button).
*/ */
show: boolean; show: boolean;
/**
* By default displaying a modal will close all existing modals. Set this to true to keep the existing modals open instead. This is useful for confirmation modals.
*/
stackable?: 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, show }: 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, stackable }: ModalProps) {
const modalRef = _modalRef ?? useRef<HTMLDivElement>(null); const modalRef = _modalRef ?? useRef<HTMLDivElement>(null);
const modalInstanceRef = useRef<BootstrapModal>(); const modalInstanceRef = useRef<BootstrapModal>();
const formRef = _formRef ?? useRef<HTMLFormElement>(null); const formRef = _formRef ?? useRef<HTMLFormElement>(null);
@ -94,7 +98,7 @@ export default function Modal({ children, className, size, title, header, footer
return; return;
} }
if (show) { if (show) {
openDialog(parentWidget.$widget).then(($widget) => { openDialog(parentWidget.$widget, !stackable).then(($widget) => {
modalInstanceRef.current = BootstrapModal.getOrCreateInstance($widget[0]); modalInstanceRef.current = BootstrapModal.getOrCreateInstance($widget[0]);
}) })
} else { } else {