From 198a599a2bae4a70aa7050c60dac14596d1197d6 Mon Sep 17 00:00:00 2001
From: Alex Turchyn <alex@docuseal.com>
Date: Thu, 10 Sep 2026 21:45:44 +0300
Subject: [PATCH] add native-modal element

---
 app/javascript/application.js                |  2 ++
 app/javascript/elements/native_modal.js      | 17 +++++++++++++++++
 app/views/shared/_turbo_drawer.html.erb      |  4 ++--
 app/views/shared/_turbo_modal.html.erb       |  4 ++--
 app/views/shared/_turbo_modal_large.html.erb |  4 ++--
 5 files changed, 25 insertions(+), 6 deletions(-)
 create mode 100644 app/javascript/elements/native_modal.js

diff --git a/app/javascript/application.js b/app/javascript/application.js
index d0b69c0dc..967416ef9 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -11,6 +11,7 @@ import DisableHidden from './elements/disable_hidden'
 import TurboModal from './elements/turbo_modal'
 import NativeAction from './elements/native_action'
 import NativeSearch from './elements/native_search'
+import NativeModal from './elements/native_modal'
 import FileDropzone from './elements/file_dropzone'
 import MenuActive from './elements/menu_active'
 import ClipboardCopy from './elements/clipboard_copy'
@@ -110,6 +111,7 @@ safeRegisterElement('disable-hidden', DisableHidden)
 safeRegisterElement('turbo-modal', TurboModal)
 safeRegisterElement('native-action', NativeAction)
 safeRegisterElement('native-search', NativeSearch)
+safeRegisterElement('native-modal', NativeModal)
 safeRegisterElement('file-dropzone', FileDropzone)
 safeRegisterElement('menu-active', MenuActive)
 safeRegisterElement('clipboard-copy', ClipboardCopy)
diff --git a/app/javascript/elements/native_modal.js b/app/javascript/elements/native_modal.js
new file mode 100644
index 000000000..d6f84532b
--- /dev/null
+++ b/app/javascript/elements/native_modal.js
@@ -0,0 +1,17 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    document.addEventListener('turbo:submit-end', this.onSubmit)
+  }
+
+  disconnectedCallback () {
+    document.removeEventListener('turbo:submit-end', this.onSubmit)
+  }
+
+  onSubmit = (e) => {
+    if (!e.detail.success || e.detail.fetchResponse?.redirected) return
+    if (this.dataset.closeAfterSubmit === 'false') return
+    if (e.detail.formSubmission?.formElement?.dataset?.closeOnSubmit === 'false') return
+
+    window.webkit?.messageHandlers?.modal?.postMessage({ action: 'submitted' })
+  }
+}
diff --git a/app/views/shared/_turbo_drawer.html.erb b/app/views/shared/_turbo_drawer.html.erb
index 5462003f8..c8928aeee 100644
--- a/app/views/shared/_turbo_drawer.html.erb
+++ b/app/views/shared/_turbo_drawer.html.erb
@@ -1,9 +1,9 @@
 <% if turbo_native_app? && !turbo_frame_request? %>
   <% content_for(:html_title, local_assigns[:title]) if local_assigns[:title] %>
   <turbo-frame id="drawer">
-    <div class="w-full">
+    <native-modal class="block w-full" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
       <%= yield %>
-    </div>
+    </native-modal>
   </turbo-frame>
 <% else %>
   <% offset = local_assigns[:title] ? '45px' : '0px' %>
diff --git a/app/views/shared/_turbo_modal.html.erb b/app/views/shared/_turbo_modal.html.erb
index c155c74fa..b2b3487f9 100644
--- a/app/views/shared/_turbo_modal.html.erb
+++ b/app/views/shared/_turbo_modal.html.erb
@@ -1,9 +1,9 @@
 <% if turbo_native_app? && !turbo_frame_request? %>
   <% content_for(:html_title, local_assigns[:title]) if local_assigns[:title] %>
   <turbo-frame id="modal">
-    <div class="max-w-lg mx-auto px-4 pb-6">
+    <native-modal class="block max-w-lg mx-auto px-4 pb-6" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
       <%= yield %>
-    </div>
+    </native-modal>
   </turbo-frame>
 <% else %>
   <turbo-frame id="modal">
diff --git a/app/views/shared/_turbo_modal_large.html.erb b/app/views/shared/_turbo_modal_large.html.erb
index d8f10cb48..96e4530ca 100644
--- a/app/views/shared/_turbo_modal_large.html.erb
+++ b/app/views/shared/_turbo_modal_large.html.erb
@@ -19,9 +19,9 @@
   </turbo-frame>
 <% elsif turbo_native_app? %>
   <% content_for(:html_title, local_assigns[:title]) if local_assigns[:title] %>
-  <div class="w-full [&>.px-5]:px-4">
+  <native-modal class="block w-full [&>.px-5]:px-4" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
     <%= yield %>
-  </div>
+  </native-modal>
 <% else %>
   <% if local_assigns[:title] %>
     <div class="sticky top-0 z-10 flex justify-between bg-base-100 py-2 px-5 items-center border-b pb-2 font-medium">