14  WA Dialog (confirmation and modal)

(ns oiiku.ui.impl.docs.wa-dialog
  (:require
   [scicloj.kindly.v4.kind :as kind]))

We use wa-dialog for both the conformation and modal widgets.

14.1 Closing the confirmations/modals

When closing confirmation/modal wa-dialogs, we need to stop the event propagation in order to stop wa-dialog elements further up the dom tree from closing.

This needs to be done in keydown and wa-hide. Internally keydown is used to trigger a close of the wa-dialog element, and then bubbles upwards, causing wa-dialog elements further up the DOM tree to handle the event as well, causing a close of those elements. wa-hide also bubbles up, and so also needs to be stopped.

A new .stopPropagation is introduced for confirmation and modal, as the :effect.target/stop-propagation caused the up/down arrow keys to stop working in wa-select. This is used for keydown only. wa-hide uses the standard :effect.target/stop-propagation

[:wa-dialog {:keydown [[:effect.ui.model/stop-propagation]]}]

Further implementation would look something like this:

[:wa-dialog
 {:wa-hide [[:action.widgets.modal/close :my-modal-id]],
  :keydown [[:effect.ui.model/stop-propagation]]}]

If the effect.ui.model/stop-propagation / effect.ui.confirmation/stop-propagation is not added, any nested wa-dialog elements will all close together from one press of Esc.

14.1.1 Experiments

Some experiments were done with controlling this via checking the layers state against which layer the modal/conformation would be. This worked, but caused a new problem where the pulse animation for a prevented closing of a wa-dialog element would run when it was not supposed to. It’s possible to solve this via supressing WA’s defaults and add new effects to replicate the behaviour, but with more control on our part. This was deemed a rabbit hole and dropped.

source: bases/admin-web/src/oiiku/ui/impl/docs/wa_dialog.clj