Stack Settings dialogs

- return explicit dialog result, ignore for now "cancel" result
- Settings passes down it's onClose to children dialogs so when they
  close via "close"
- fix #3868

packages/frontend/src/components/Dialog/BackButton.tsx

@@ -14,6 +14,8 @@ export default function BackButton(
 
   return (
     <HeaderButton
+      value='cancel'
+      formMethod='dialog'
       aria-label={tx('back')}
       icon='arrow-left'
       iconSize={24}

packages/frontend/src/components/Dialog/Dialog.tsx

@@ -50,53 +50,52 @@ const Dialog = React.memo<Props>(
             rect.left <= ev.clientX &&
             ev.clientX <= rect.left + rect.width
           if (!isInDialog) {
-            const cancelEvent = new Event('cancel')
-            dialog.current.dispatchEvent(cancelEvent)
-            // cancel event doesn't trigger dialog close
-            dialog.current.close()
+            dialog.current.close('cancel')
           }
         }
       : () => {}
 
-    const onClose = (value: any) => {
-      props.onClose && props.onClose(value)
-      dialog.current!.style.display = 'none'
+    const onClose = (_: any) => {
+      props.onClose && props.onClose(dialog.current?.returnValue)
     }
 
-    const onCancel = (ev: React.BaseSyntheticEvent) => {
+    const onEscapePress = (ev: React.BaseSyntheticEvent) => {
+      // by default this fires a 'close' event with undefined as value
+      // to unify everything we explicitly call close with 'cancel' value
+      ev.preventDefault()
       if (!canEscapeKeyClose) {
-        ev.preventDefault()
+        return
       }
+
+      dialog.current?.close('cancel')
     }
 
     useEffect(() => {
-      // calling showModal is "only" the way to have ::backdrop
+      // calling showModal is "only" the way to have ::backdrop and "cancel" event
       dialog.current?.showModal()
-      dialog.current!.style.display = 'flex'
     })
 
-    let style
-
-    if (!unstyled) {
-      style = {
-        width: width && `${width}px`,
-        height: height && `${height}px`,
-      }
-    }
+    const style = unstyled
+      ? undefined
+      : {
+          width: width && `${width}px`,
+          height: height && `${height}px`,
+        }
 
+    // NOTE: do not set method="dialog" on form, it will cause every button to close the dialog
     return (
       <dialog
         onClick={onClick}
         onClose={onClose}
-        onCancel={onCancel}
+        onCancel={onEscapePress}
         ref={dialog}
         className={classNames(styles.dialog, props.className, {
           [styles.unstyled]: unstyled,
         })}
         style={style}
         data-testid={props['dataTestid']}
       >
-        {children}
+        <form>{children}</form>
       </dialog>
     )
   }

packages/frontend/src/components/Dialog/DialogHeader.tsx

@@ -28,7 +28,11 @@ export default function DialogHeader(props: Props) {
       {children}
       {onClickEdit && <EditButton onClick={onClickEdit} />}
       {onClose && (
-        <CloseButton onClick={onClose} data-testid={props.dataTestid} />
+        <CloseButton
+          value='close'
+          formMethod='dialog'
+          data-testid={props.dataTestid}
+        />
       )}
     </header>
   )

packages/frontend/src/components/Dialog/styles.module.scss

@@ -3,8 +3,13 @@ $paddingHorizontal: 30px;
 $paddingVertical: 20px;
 
 .dialog {
+  opacity: 0;
   padding: 0;
 
+  &:last-of-type {
+    opacity: 1;
+  }
+
   &.unstyled {
     background: none;
     width: 100vw;