Dialogs with a Form inside are closed on outside click

[HDinger]

Steps to reproduce

• Create a dialog with a form inside
• Can for example be seen in the existing previews:
  • https://primer.style/view-components/lookbook/inspect/primer/alpha/dialog/with_text_input
• Open the dialog
• Fill the input inside the form
• Click outside of the dialog

<%= render(Primer::Alpha::Dialog.new(id: "my-dialog", title: title, subtitle: subtitle)) do |d| %>
  <% d.with_show_button { button_text } %>
  <form class="pt-3">
    <%= render(Primer::Alpha::Dialog::Body.new) do %>
      This is a custom dialog with the body and footer wrapped in a form tag.
      <input id="dialog-text-input-example" type="text" value="Some text goes in here" autocomplete="off">
    <% end %>
    <%= render(Primer::Alpha::Dialog::Footer.new(show_divider: show_divider)) do %>
      <%= render(Primer::Beta::Button.new(data: { "close-dialog-id": "my-dialog" })) { "Cancel" } %>
      <%= render(Primer::Beta::Button.new(scheme: :primary, type: :submit)) { "Submit" } %>
    <% end %>
  </form>
<% end %>

Actual behavior

• An outside click closes the dialog and all unsaved changes are gone

Expected behavior

• In the docs it says:

By default, clicking on the backdrop will dismiss the dialog. However, if the dialog contains a form that can have unsaved changes, the backdrop won't dismiss the dialog, regardless of the state of the form.