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}
stackable
>
{!opts?.message || typeof opts?.message === "string"
? <div>{(opts?.message as string) ?? ""}</div>

View File

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

View File

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

View File

@ -69,6 +69,7 @@ function PromptDialogComponent() {
}}
footer={<Button text={t("prompt.ok")} keyboardShortcut="Enter" primary />}
show={shown}
stackable
>
<FormGroup label={opts?.message} labelRef={labelRef}>
<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).
*/
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 modalInstanceRef = useRef<BootstrapModal>();
const formRef = _formRef ?? useRef<HTMLFormElement>(null);
@ -94,7 +98,7 @@ export default function Modal({ children, className, size, title, header, footer
return;
}
if (show) {
openDialog(parentWidget.$widget).then(($widget) => {
openDialog(parentWidget.$widget, !stackable).then(($widget) => {
modalInstanceRef.current = BootstrapModal.getOrCreateInstance($widget[0]);
})
} else {