Merge pull request #76 from opf/bump/primer-upstream

Bump/primer upstream

Author: HDinger

.changeset/cool-meals-appear.md

@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": patch
+---
+
+Ensure Overlays that open dialogs do not close when the Dialog opens

.changeset/strange-windows-occur.md

@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": patch
+---
+
+Ensure only direct clicks to the dialog can close it

app/components/primer/dialog_helper.ts

@@ -7,15 +7,13 @@ function dialogInvokerButtonHandler(event: Event) {
   // If the user is clicking a valid dialog trigger
   let dialogId = button?.getAttribute('data-show-dialog-id')
   if (dialogId) {
-    event.stopPropagation()
     const dialog = document.getElementById(dialogId)
     if (dialog instanceof HTMLDialogElement) {
       dialog.showModal()
       // A buttons default behaviour in some browsers it to send a pointer event
       // If the behaviour is allowed through the dialog will be shown but then
       // quickly hidden- as if it were never shown. This prevents that.
       event.preventDefault()
-      event.stopPropagation()
     }
   }
 
@@ -46,6 +44,20 @@ export class DialogHelperElement extends HTMLElement {
       for (const record of records) {
         if (record.target === this.dialog) {
           this.ownerDocument.body.classList.toggle('has-modal', this.dialog.hasAttribute('open'))
+          // In some older browsers, such as Chrome 122, when a top layer element (such as a dialog)
+          // opens from within a popover, the "hide all popovers" internal algorithm runs, hiding
+          // any popover that is currently open, regardless of whether or not another top layer element,
+          // such as a <dialog> is nested inside.
+          // See https://github.com/whatwg/html/issues/9998.
+          // This is fixed by https://github.com/whatwg/html/pull/10116, but while we still support browsers that present this bug,
+          // we must undo the work they did to hide ancestral popovers of the dialog:
+          if (this.dialog.hasAttribute('open')) {
+            let node: HTMLElement | null = this.dialog
+            while (node) {
+              node = node.closest('[popover]:not(:popover-open)')
+              if (node) node.showPopover()
+            }
+          }
         }
       }
     }).observe(this, {subtree: true, attributeFilter: ['open']})
@@ -58,11 +70,8 @@ export class DialogHelperElement extends HTMLElement {
   handleEvent(event: MouseEvent) {
     const target = event.target as HTMLElement
     const dialog = this.dialog
-    if (!dialog?.open) return
-
-    // if the target is inside the dialog, but is not the dialog itself, leave
-    // the dialog open
-    if (target?.closest('dialog') === dialog && target !== dialog) return
+    // The click target _must_ be the dialog element itself, and not elements underneath or inside.
+    if (target !== dialog || !dialog?.open) return
 
     const rect = dialog.getBoundingClientRect()
     const clickWasInsideDialog =

previews/primer/alpha/dialog_preview.rb

@@ -248,6 +248,29 @@ def scroll_container(title: "Test Dialog", subtitle: nil, position: :center, siz
                                visually_hide_title: visually_hide_title
                              })
       end
+
+      # @label Dialog inside Overlay
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param size [Symbol] select [small, medium, medium_portrait, large, xlarge]
+      # @param position [Symbol] select [center, right, left]
+      # @param position_narrow [Symbol] select [inherit, bottom, fullscreen, left, right]
+      # @param visually_hide_title [Boolean] toggle
+      # @param button_text [String] text
+      # @param body_text [String] text
+      def dialog_inside_overlay(title: "Test Dialog", subtitle: nil, position: :center, size: :medium, button_text: "Show Dialog", body_text: "Content", position_narrow: :fullscreen, visually_hide_title: false)
+        render_with_template(locals: {
+                               title: title,
+                               subtitle: subtitle,
+                               position: position,
+                               size: size,
+                               button_text: button_text,
+                               body_text: body_text,
+                               position_narrow: position_narrow,
+                               visually_hide_title: visually_hide_title
+                             })
+      end
     end
   end
 end

previews/primer/alpha/dialog_preview/dialog_inside_overlay.html.erb

@@ -0,0 +1,9 @@
+<%= render(Primer::Alpha::Overlay.new(title: "An overlay")) do |o| %>
+  <% o.with_show_button() { "Show overlay" } %>
+  <% o.with_body() do %>
+    <%= render(Primer::Alpha::Dialog.new(id: "dialog-one", title: title, position: position, subtitle: subtitle, visually_hide_title: false)) do |d| %>
+      <% d.with_show_button { button_text } %>
+      <% d.with_body { body_text} %>
+    <% end %>
+  <% end %>
+<% end %>

previews/primer/alpha/dialog_preview/nested_dialog.html.erb

@@ -12,3 +12,10 @@
     <% end %>
   <% end %>
 <% end %>
+
+<div style="margin-top:2rem">
+<%= render(Primer::Beta::Flash.new(scheme: :warning)) do %>
+  <p>Please be careful nesting dialogs! Note that in this example, opening the second dialog does not close the first.</p>
+  <p>Closing a dialog while opening a dialog inside, will cause both to be invisible which will lead to undesired effects!</p>
+<% end %>
+</div>

static/info_arch.json

@@ -3375,6 +3375,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/dialog/dialog_inside_overlay",
+        "name": "dialog_inside_overlay",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [

static/previews.json

@@ -3186,6 +3186,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/dialog/dialog_inside_overlay",
+        "name": "dialog_inside_overlay",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },

test/system/alpha/dialog_test.rb

@@ -93,5 +93,28 @@ def test_outside_menu_click_does_not_close_dialog
       find(".ActionListItem", text: "Avocado").click
       assert_selector "dialog[open]"
     end
+
+    def test_click_events_can_be_added_to_invoker_buttons
+      # use this preview because it assigns a static ID to the invoker button
+      visit_preview(:with_header)
+
+      page.evaluate_script(<<~JS)
+        document.querySelector('#dialog-show-my-dialog').addEventListener('click', () => {
+          window.dialogInvokerClicked = true
+        })
+      JS
+
+      click_button("Show Dialog")
+
+      assert page.evaluate_script("window.dialogInvokerClicked"), "click event was not fired"
+    end
+
+    def test_dialog_inside_overlay_opens_when_clicked
+      visit_preview(:dialog_inside_overlay)
+
+      click_button("Show overlay")
+      click_button("Show Dialog")
+      assert_selector "dialog[open]"
+    end
   end
 end